css - 使用 CSS3 Filter 改变特定颜色

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>