如何使用 CSS 将透明白色图像重新着色为任意颜色？

Question

如何仅使用 CSS 拍摄仅包含白色和透明像素的图像（示例）并重新着色为红色或橙色？

以下问题之前曾被问过 -

通过CSS改变PNG图像的颜色？

答案说使用过滤器，但没有指出哪种过滤器组合可以使其发挥作用。是否有任何滤镜组合可以让我将透明白色图像更改为红色？

---

澄清一下：我想重新着色图像的白色部分，而不是背景颜色。例如，我想要它是透明的红色。

img {
  -webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg);
  }

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>

Answer 1

我玩了一下，找到了一个可能的解决方案，只绘制白色部分：

img {
  display: block;
  background: black;
  -webkit-filter: brightness(.5);
}
.recolor {
  position: relative;
  display: inline-block;
  -webkit-filter: brightness(1) contrast(300%) invert(1);
}
.recolor:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 255, 255, 0.3);
}

<figure class="recolor">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png">
</figure>

怎么运行的：

1. 将图像背景设置为黑色并将其亮度设置为一半，使前景变为灰色
2. 创建一个包装元素 ( <figure>) 并创建:after您想要的具有相对较低不透明度的反转颜色的覆盖层 ( )
3. 现在过滤包装元素：使其如此明亮且具有如此高的对比度，以至于背景变成黑色，但前景色仍然存在。
4. 现在只需反转包装即可使前景色变为白色

限制：透明度丢失，由于过滤，颜色可能不完全是您想要的颜色，浏览器支持不是最佳的