使用CSS3过滤器更改特定颜色

Question

目前我有一个.png-图像，仅由白色(#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>