css过滤器使元素成为一种颜色答案

【问题标题】：css filter to make elements one colorcss过滤器使元素成为一种颜色
【发布时间】：2015-03-15 23:32:33
【问题描述】：

以下 CSS 过滤器：

filter: brightness(0) invert(1);

使元素全白 (source)。整洁，但有没有办法让它们变成另一种颜色，例如蓝色？这适用于有透明背景的情况，例如一个图标。我想让图标变成一种任意颜色。

【问题讨论】：

标签： css colors css-filters

【解决方案1】：

hue-rotate() 滤镜会影响所有颜色，但它不会将全彩色图像变成单色图像。相反，它将移动色轮周围的所有颜色。

但是，您可以通过转换为灰度、添加棕褐色然后旋转色调来破解解决方案这会使图像看起来像一个单一的绿色阴影：

filter: grayscale(100%) sepia(100%) hue-rotate(90deg);

如果你关心处理矢量作品，比如你会经常使用的图标，你可以考虑将它转换为 SVG，然后你可以用纯 css 为它着色。 https://icomoon.io 可以提供帮助。

【讨论】：

啊sepia(100%) 非常棒，通过减少brightness(0.9) 然后应用棕褐色来获得具有颜色的白色图像，有一个色调可以旋转。

【解决方案2】：

添加contrast(0) 作为第一步会将图标的颜色变平为统一的灰色，这是我所需要的。我还需要摆弄brightness 和saturate 才能达到我的目标颜色。

filter: contrast(0) sepia(100%) hue-rotate(116deg) brightness(1.4) saturate(0.28);

Codepen example

【讨论】：

【解决方案3】：

如果您从 CSS 中引用 SVG 过滤器，那么您可以获得特定的颜色。 SVG 过滤器 sn-p 下面。对于您的特定颜色，将 .7/.4/.5 替换为 RGB 值的统一值。

<filter id="colorme" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="0 0 0 0 .7  0 0 0 0 .4  0 0 0 0 .5  0 0 0 1 0"/>
</filter>

hue-rotate() 是一个非常受损的过滤器，因为它不在 HSL 空间中运行。它是一种 RGB 近似值，往往会严重裁剪饱和颜色。

【讨论】：

这行得通。您可以在此处从 RGB 中获得近似的 feColorMatrix 颜色值：andresgalante.com/RGBAtoFeColorMatrix
我不知道如何引用 SVG 过滤器，这个 codepen 显示了一个方法：codepen.io/AmeliaBR/pen/JdXpPB

【解决方案4】：

在此链接输入任何颜色，它将返回您需要的过滤器：

https://codepen.io/sosuke/pen/Pjoqqp

例如，如果你输入#CC0000，它会给你：

filter: invert(8%) sepia(97%) saturate(7488%) hue-rotate(12deg) brightness(92%) contrast(114%);

它还会对结果的准确性进行评分。您可以继续尝试，直到获得满分。

我相信它假定您的图像是黑色的。如果不是，首先将图像变黑：

brightness(0) saturate(100%)

因此，使用前面的示例，最终解决方案（如果您的图像不是黑色的）将是：

filter: brightness(0) saturate(100%) invert(8%) sepia(97%) saturate(7488%) hue-rotate(12deg) brightness(92%) contrast(114%);

现在要是有人会写一个 npm 包来动态地为你做这件事就好了！

【讨论】：