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

Question

如何仅使用白色透明像素（example）拍摄图像，并仅使用CSS重新着色为红色或橙色？

以下问题事先被问过 -

Change color of PNG image via CSS?

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

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

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. 现在只需将包装器反转以获得白色的前景色

限制：透明度会丢失，因为过滤颜色可能不是您想要的颜色，browser support不是最佳

Answer 2

可以着色＆＃34;着色＆＃34;使用滤镜的白色图像，但结果不完美。

第一步是sepia过滤器，然后是hue-rotate。

真实的＆＃34;红色＆＃34;可能更难实现，但你可以进一步发挥它。

＆＃13;

＆＃13;

img {
  max-height: 100vh;
  width: auto;
  -webkit-filter: 
    sepia(100%) 
    saturate(2000%) 
    hue-rotate(222deg);
}
body {
  background: green;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需为图像提供背景色，例如下面的例子。

使用此图片

注意：图像是透明的

<强> CSS

img{
    background-color: red;
}

<强> HTML

<img src="test.png">