是否可以通过CSS滤镜方法（如HueRotate，饱和度和亮度）进行更改，PNG的颜色是否为全白色？像Photoshop的颜色叠加效果，但在CSS。
这将是一个很好的解决方案，可以避免创建大量只改变颜色的图像。例如，一组具有UI的深色和浅色版本的图标。
答案 0 :(得分：26)
你也可以通过添加棕褐色然后一些饱和度，色调旋转，例如白色图像来着色。在CSS中：
filter: sepia() saturate(10000%) hue-rotate(30deg)
这应该使白色图像成为绿色图像。
答案 1 :(得分：7)
这是一个很酷的主意，但它不适用于您建议的白色图像。您可以使用彩色图像进行操作，但如果全部为白色则不能。我在Safari中使用CSS过滤器的webkit版本尝试了以下内容：
<div style="background-color:#FFF; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>
但盒子保持白色。如果我将颜色切换为蓝色，如下所示：
<div style="background-color:#00F; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>
我得到一个红色的盒子。这是因为滤镜适用于白色或黑色不存在的色调值。
答案 2 :(得分：5)
尝试将brightness设为大于100%。您会注意到，当您移动到100%以上时，图像将开始淡化为白色。图像的暗度将决定您需要移动100%的距离。
img {
-webkit-filter: brightness(1000%);
}
请记住，只有Google Canary用户才能看到CSS3过滤器，并且CSS3过滤器不会影响任何其他浏览器中的图像。 （至少到目前为止）。
答案 3 :(得分：5)
其实谢天谢地是一种方式！
如前所述，主要困难在于灰度图像中基本上没有颜色。值得庆幸的是，有一个过滤器可以泵出一些颜色！
<强> sepia(100%)
我在纯色图片上尝试了以下css样式，其基色为#ccc
sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)
我能够将图像颜色更改为浅绿色。
享受;）