CSS 过滤器作为一个图像的颜色修饰符

Question

是否可以使用 HueRotate、Saturation 和 Brightness 等 CSS 过滤器方法来更改绘制成全白的 PNG 的颜色？类似于 Photoshop 的颜色叠加效果，但在 CSS 中。

这将是一个很好的解决方案，可以避免创建大量只改变颜色的图像。例如，一组具有深色和浅色版本的 UI 图标。

原文由 Mateus Leon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您还可以通过添加棕褐色然后添加一些饱和度、色调旋转来为白色图像着色，例如在 CSS 中：

filter: sepia() saturate(10000%) hue-rotate(30deg)

这应该使白色图像成为绿色图像。

http://jsbin.com/xetefa/1/edit

原文由 Ciantic 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个很酷的想法，但它不适用于您建议的白色图像。您可以使用彩色图像来做到这一点，但如果它全是白色则不行。我使用 CSS 过滤器的 webkit 版本在 Safari 中尝试了以下操作：

 <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>

我得到一个红色的盒子。这是因为过滤器适用于白色或黑色中不存在的色调值。

原文由 bitfiddler 发布，翻译遵循 CC BY-SA 3.0 许可协议