是否可以使用 CSS 过滤器方法（如 HueRotate、Saturation 和 Brightness）来更改绘制成全白的 PNG 的颜色？类似于 Photoshop 的颜色叠加效果，但在 CSS 中。
这将是避免创建大量仅更改颜色的图像的好方法。例如，一组具有深色和浅色版本的 UI 图标。
【问题讨论】：
您还可以通过添加棕褐色然后添加一些饱和度、色调旋转来为白色图像着色，例如在 CSS 中：
filter: sepia() saturate(10000%) hue-rotate(30deg)
这应该使白色图像变成绿色图像。
【讨论】：
sepia 过滤器可以将阴影更改为颜色！好东西。同意这应该被接受。
这是一个很酷的想法，但它不适用于您建议的白色图像。你可以用彩色图像来做，但如果它全是白色的就不行。我在 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>
我得到一个红色的盒子。这是因为滤镜作用于白色或黑色中不存在的色调值。
【讨论】：
其实有一种方法！
如前所述，这里的主要困难是灰度图像中基本上没有颜色。值得庆幸的是，有一个过滤器可以泵送一些颜色！
sepia(100%)
我在一张纯色图片上尝试了以下css样式，其基色为#ccc
sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)
我能够将图像颜色更改为浅绿色。
享受;)
【讨论】：
360deg 最大值，因为色轮中有 360 度。因此，石灰绿可以用hue-rotate(63deg) 表示，因为 423 - 360 = 63。
尝试使brightness 大于100%。当您在100% 上方移动得更远时，您会注意到图像将开始淡化为白色。图像的暗度将决定您需要从100% 移动多远。
img {
-webkit-filter: brightness(1000%);
}
请记住，只有 Google Canary 用户可以看到 CSS3 过滤器，并且 CSS3 过滤器不会影响任何其他浏览器中的图像。 （至少到目前为止）。
【讨论】：
filter: grayscale。但是，如果想要涵盖所有颜色可能性，您需要为图标选择一种默认颜色并使用hsl filters 对其进行操作。这就是我要说的，我根本不知道是什么。