css - 带有 CSS 和 PNG 的假字体图标

Question

我有一个透明的灰度 PNG 图标。我希望能够像字体图标一样改变它的颜色。

更多细节:PNG 具有实际“图标”的外部透明度和内部白色区域，加上一个小的灰度渐变，因此它们具有美观的“模糊”边缘。我配备了 Image Magic，所以我不介意在任何解决方案之前是否必须采取负片/以其他方式对 PNG 进行转换。

为什么我不能只使用字体图标集:我们正在使用一些自定义的专有图标，我花了几个小时尝试将它们转换为字体图标集，但没有成功。所以我不太可能在那里找到我们的图标，而且我无法将我们的图标放入字体图标集中。我可能做错了，或者我可能没有找到正确的工具。

所以我的下一个最佳选择是使用CSS“Masking”，只是我无法完成这项工作。这个想法是将 div 的背景设置为正确的颜色，然后遮盖 div，以便只有与图标相对应的部分可见......但我也无法使其工作。

我对任何想法持开放态度，但我的直觉告诉我 CSS 的东西是“可行的方法”，除非有一些我还没有找到的 PNG->字体​​工具。

重申一下:我有一个具有透明度的灰度 PNG，我需要使用 CSS 设置的“字体颜色”在网站上显示它。

有什么想法吗？ (谢谢!)

Answer 1

为此使用屏蔽并不难:

.filtered {
    width:200px;
    height:200px;
    position:relative;
    background-color: red;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-image: url(http://i35.tinypic.com/2091450.png); 
    mask-size: 100% 100%;
    mask-image: url(http://i35.tinypic.com/2091450.png); 
}

但是您不会获得对旧浏览器的太多支持

fiddle