CSS滤镜使元素变为单色

Question

以下是CSS滤镜：

filter: brightness(0) invert(1);

使元素变成全白色 (来源)。虽然看起来很整洁，但有没有一种方法可以改为另一种颜色，例如蓝色？这适用于存在透明背景（例如图标）的情况。我想将图标变成任意一种颜色。

- mahemoff

Answer 1

hue-rotate() 过滤器会影响所有颜色，因此它不会将全彩图像变成单一颜色。相反，它会将所有颜色沿着色轮移动。 但是您可以通过转换为灰度，添加褐色，然后旋转色调来实现解决方案，这会使图像看起来像是一个绿色阴影的单色调。

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

如果您在处理像图标这样的矢量作品，并且需要经常使用它，那么您可以考虑将其转换为SVG，然后可以使用纯CSS对其进行着色。https://icomoon.io可以帮助您完成此操作。

- Mark

---

啊，使用 sepia(100%) 很棒，可以通过减少 brightness(0.9) 并应用 sepia 来使白色图像具有颜色，然后还可以使用 hue 进行旋转。 - OG Sean

为什么W3C会添加像棕褐色这样的小众功能，而不是像颜色滤镜这样数学上微不足道且多用途的功能，这让我感到困惑。 - Lőrinc Bethlenfalvy

Answer 2

如果您从CSS中引用SVG滤镜，则可以获得特定的颜色。以下是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逼近，往往会严重削弱饱和颜色。

- Michael Mullany

---

这个可行。你可以在这里获取大致的feColorMatrix颜色值：http://andresgalante.com/RGBAtoFeColorMatrix/ - Jeremy John

我不知道如何引用SVG过滤器，这个CodePen展示了一种方法：https://codepen.io/AmeliaBR/pen/JdXpPB - lami

https://fecolormatrix.com/ 这个网站也做得很好，展示了清晰的代码示例。 - RWC

Answer 3

作为第一步添加contrast(0)将使图标的颜色变为统一的灰色，这是我需要的。我还需要调整brightness和saturate来达到我的目标颜色。

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

Codepen 示例

- Paul Chamberlain

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包就好了！

- danday74