使用 CSS3 滤镜改变特定颜色

Question

目前，我有一个.png图像，仅由两个 colors 白色（ #FFFFFF ）和红色（ #EA3D05 ）组成，我想使用 CSS 过滤器更改此图像的颜色。 特别是我需要用黑色（ #000000 ）替换白色并保持红色不变。

我目前的方法是使用

filter: invert(100%);

这将使用白色像素黑色的颜色，但也会影响红色。 我认为现在可以将（现在的蓝色像素）改回红色（ #EA3D05 ），因为其他像素是黑色的。 有什么办法可以做到这一点？

Answer 1

您可以考虑使用filter和mix-blend-mode来近似：

 .box { width: 200px; height: 200px; background: radial-gradient(#EA3D05 50%, #fff 50%); border: 1px solid #EA3D05; }.wrapper { display: inline-block; position: relative; }.wrapper::after { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; /* adjust below until you get closer */ background: #EA3D05; mix-blend-mode: hue; }

 <p>Original image</p> <div class="box"></div> <p>New image</p> <div class="wrapper"> <div class="box" style="filter:invert(100%);"></div> </div>