我知道有很多css过滤器,特别是webkit,但我找不到一个白色(#FFFFFF)图像着色的解决方案.我尝试了一些过滤器的组合,但没有一个使我的图像着色.我只能在灰度或棕褐色的范围内更改图像.
所以我的问题是：
有没有办法只使用css将我的全白色png改为(例如)红色？
如此图所示：
解决方法
这可以通过css masking完成,但不幸的是浏览器支持非常糟糕(我相信webkit).
http://jsfiddle.net/uw1mu81k/1/
-webkit-mask-Box-image: url(http://yourimagehere);
因为您的图像都是白色的,所以它是遮罩的理想选择.掩模的工作方式是,无论图像是白色,原始元素都显示为正常,其中原始元素的黑色(或透明)未显示.中间的任何东西都有一定程度的透明度.
编辑：
你也可以在svg的帮助下在FireFox中使用它.
http://jsfiddle.net/uw1mu81k/4/
div {
width: 50px;
height: 50px;
mask: url(#mymask);
-webkit-mask-Box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);
}
<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<div style="background-color: orange;"></div>
<div style="background-color: purple;"></div>
<svg height="0" width="0">
<mask id="mymask">
<image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" />
</mask>
</svg>
