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

Posted 2023-03-28

【中文标题】CSS 过滤器作为一个图像的颜色修饰符

【英文标题】：CSS Filter as a color modifier for one image

【发布时间】：2013-06-25 18:42:25

【问题描述】：

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

这将是避免创建大量仅更改颜色的图像的好方法。例如，一组具有深色和浅色版本的 UI 图标。

【问题讨论】：

@MichaelPetrotta：你为什么把我的问题拉回最初的修订版？我知道我的英语不是很多，而且其他人的改进是非常必要的。

他的编辑很糟糕——他增加的伤害和他删除的一样多。但你是对的，我删除了一些修复。我会编辑。

谢谢，我真的很感激！

顺便说一句：真的，不是真的......对不起，哈哈哈......

【参考方案1】：

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

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

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

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

【讨论】：

添加了一个 JSBin 来显示每个色相旋转值。很明显，不幸的是，并非所有颜色都可以生成。

增加亮度(50%) 进出色轮，你应该可以得到任何颜色

这应该是公认的答案 - 现在如果有人会制作一个在线工具来生成获得特定 rgb/hsl 值所需的过滤器......

这是一个非常聪明的主意 - 了解 sepia 过滤器可以将阴影更改为颜色！好东西。同意这应该被接受。

我在这里提出了一个关于从黑色变为任何颜色的确切公式的问题***.com/q/42966641/181228

【参考方案2】：

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

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

【讨论】：

谢谢老兄，这真的很清楚！那么，以蓝色为起点（或任何其他颜色，绝对黑色和白色除外），我可以得到任何其他颜色吗？包括黑白？

不客气。尝试它很有趣。您可以根据亮度和灰度旋转到任何颜色或将颜色设置为黑色或白色。

这就是我要说的！哈哈哈……当然，广泛使用这种技术是有局限性的，但是当你得到一个有特定目标的项目时，这样的事情真的对我们很有帮助！

【参考方案3】：

其实有一种方法！

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

sepia(100%)

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

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

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

享受;)

【讨论】：

hue-rotate() 滤镜旨在达到360deg 最大值，因为色轮中有 360 度。因此，石灰绿可以用hue-rotate(63deg) 表示，因为 423 - 360 = 63。

【参考方案4】：

尝试使brightness 大于100%。当您在100% 上方移动得更远时，您会注意到图像将开始淡化为白色。图像的暗度将决定您需要从100% 移动多远。

img 

      -webkit-filter: brightness(1000%);

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

【讨论】：

这看起来像是一个解决方案，但如果您只想使用黑白，为此，已经有一个filter: grayscale。但是，如果想要涵盖所有颜色可能性，您需要为图标选择一种默认颜色并使用hsl filters 对其进行操作。这就是我要说的，我根本不知道是什么。

@MateusDuartePoncedeLeon 所以你的意思是你想要的选项不仅将图像完全变成白色，而且变成红色？使用白色可能是一个糟糕的示例选择。

当然，白色是一个不好的选择来举例说明解决方案，但我没有注意到这一点，因为我真的相信白色可以随心所欲地改变。感谢您的帮助！