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

【问题标题】：Use CSS3 Filter to change specific color使用 CSS3 过滤器更改特定颜色
【发布时间】：2020-08-09 19:08:40
【问题描述】：

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

我目前的做法是使用

filter: invert(100%);

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

【问题讨论】：

标签： css filter colors rgb

【解决方案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>

【讨论】：