Question

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

更多细节：PNG具有外部透明度和内部白色区域，用于实际的＆＃34;图标＆＃34;，加上一个小的灰度渐变，因此它们具有漂亮的外观和模糊的＃34;边缘。我配备了Image Magic，所以我不介意在任何解决方案之前我必须在PNG上采取否定/否则执行转换。

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

所以我的下一个最好的赌注是使用CSS＆＃34; Masking＆＃34;只有我无法完成这项工作。我们的想法是将div的背景设置为正确的颜色，然后屏蔽div，这样只有与图标对应的部分才可见......但我也无法正常工作。< / p>

我对任何想法持开放态度，但我的直觉说CSS的东西是第34种方式，除非有一些PNG-＆gt;字体工具我没有＆＃39找到了。

重申一下：我有一个透明度的灰度PNG，我需要在一个带有＆＃34; font-color＆＃34;的网站上显示它。由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

带CSS和PNG的假字体图标

1 个答案: