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

Question

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

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

score 44 · Accepted Answer

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

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

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

score 6 · Accepted Answer

这是一个很酷的想法，但它不适用于您建议的白色图像。您可以使用彩色图像来做到这一点，但如果它全是白色则不行。我使用 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>

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

score 6 · Accepted Answer

其实有一种方法是值得庆幸的！

如前所述，这里的主要困难是灰度图像中基本上没有颜色。值得庆幸的是，有一个过滤器可以泵送一些颜色！

sepia(100%)

我在纯色图像上尝试了以下css样式，其基色为#ccc

sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)

我能够将图像颜色更改为石灰绿色。

享受；）

score 4 · Accepted Answer

尝试制作brightness大于100%. 您会注意到，当您再往上移动时，图像会开始变白100%。100%图像的暗度将决定您需要移动多远。

img {

      -webkit-filter: brightness(1000%);

}

请记住，只有 Google Canary 用户可以看到 CSS3 过滤器，并且 CSS3 过滤器不会影响任何其他浏览器中的图像。（至少到目前为止）。

4 回答 4