CSS过滤器使元素变为一种颜色

以下CSS过滤器：

filter: brightness(0) invert(1);

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

该hue-rotate()过滤器会影响所有的颜色然而，这样就不会变成一个全彩色图像成一个彩色图像。而是它将在色轮周围移动所有颜色。

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

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

如果您想像使用很多图标一样处理矢量工作，则可以考虑将其转换为SVG，然后可以使用纯CSS对其进行着色。https://icomoon.io可以帮助您。

添加contrast(0)作为第一步将压平的图标的颜色为均匀的灰色，我需要为我的目的。我还需要摆弄brightness和saturate达到我的目标颜色。

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

Codepen示例

如果从CSS引用SVG过滤器，则可以获得特定的颜色。下方的SVG过滤器代码段。对于您的特定颜色，将.7 / .4 / .5替换为RGB值的单位值。

hue-rotate（）是一个功能受损的过滤器，因为它无法在HSL空间中运行。这是RGB近似值，往往会严重剪切饱和的颜色。