css 过滤器使元素变成一种颜色

Question

以下 CSS 过滤器：

filter: brightness(0) invert(1);

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

Answer 1

hue-rotate()

滤镜会影响所有颜色，因此它不会将全彩图像变成单色图像。相反，它会移动色轮周围的所有颜色。

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

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

如果您喜欢处理矢量工作，例如您将经常使用的图标，您可能会考虑将其转换为 SVG，然后您可以使用纯 css 为其着色。 https://icomoon.io 可以提供帮助。

Answer 2

无需搞乱灰度/棕褐色黑客！您可以通过定义 SVG 过滤器并从 CSS 过滤器引用它来直接指定特定颜色。下面的 SVG 过滤器片段。对于您的特定颜色，请将 .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 近似值，往往会严重剪切饱和颜色。

Answer 3

添加

contrast(0)

作为第一步会将图标的颜色扁平化为统一的灰色，这是我需要的。我还需要摆弄

brightness

和

saturate

来达到我的目标颜色。

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

Codepen 示例

Answer 4

这里有一个 在线 CSS 生成器，用于转换为目标颜色。

例如，如果您输入

#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 包来动态地为你做这件事就好了！