如何使用CSS对具有透明背景的白色图像进行着色？

Question

我有一张图片，包含以下像素：

• 白色像素：我希望能动态地将它们设置为任何颜色。
• 黑色像素：我希望它们保持黑色。
• 透明像素：我希望它们显示当前背景的任何变化。

下面是一张图片，它被叠加在红色背景上：

我希望能够随意着色这只兔子，而不必使用背景技巧，因为所着色图像的背景颜色应该保持不变。

虽然JavaScript图像处理方案也可以，但更倾向于使用纯CSS实现。

以下是单独的兔子图片：

- CSJ

---

没有HTML或CSS的方法来操作图像。特别是没有办法检测图像的颜色。唯一可能解决这个问题的方法是，如果图像本身是直接嵌入HTML标记中的SVG。 - tacoshy

分享透明图像，去除红色背景。 - Temani Afif

@TemaniAfif 已更新。 - CSJ

这里有一个使用 JS 制作的非常详细的答案，它可以将黑色转换为任何所需的颜色。但请注意，转换并不是100％准确的。 - David Alberici

Answer 1

使用蒙版和混合模式，您可以实现此操作：

.bunny {
  --img: url(https://i.ibb.co/ngFGkgy/clOwR.png); /* Your png */

  width: 32px;
  aspect-ratio: 1;
  background: var(--img) center/cover;
  background-blend-mode: darken;
  -webkit-mask: var(--img) center/cover;
          mask: var(--img) center/cover;
          
  background-color: red; /* the color */
}

<div class="bunny"></div>
<div class="bunny" style="width:100px;background-color:green"></div>
<div class="bunny" style="width:100px;background-color:blue"></div>

- Temani Afif

---

你能否再解释一下它为什么有效？或许可以简单介绍一下遮罩和混合的作用。 - David Alberici

很完美。（我试过用黄色背景来确认） - CSJ

@DavidAlberici 使用遮罩只会显示图像的非透明部分（整个兔子），然后我使用相同的兔子作为背景图片，在其后面放置一个背景颜色。由于我们对于兔子有白色/黑色颜色，因此使用“变暗”将始终显示最暗的颜色，因此为黑色和您设置的背景颜色。 - Temani Afif