我有一个形象:
- 白色像素:我想动态地将它们设置为任何 colored颜色
- 黑色像素:我希望这些保持黑色
- 透明像素:我想通过当前的背景显示.
下面是覆盖在红色背景上的图像示例:
我想能够给兔子染上我喜欢的任何 colored颜色 ，而不需要使用背景技巧，因为着色图像所显示的背景色应该保持不变.
首选纯CSS解决方案，但也欢迎使用javascript图像处理方法.
兔子自己:
我有一个形象:
下面是覆盖在红色背景上的图像示例:
我想能够给兔子染上我喜欢的任何 colored颜色 ，而不需要使用背景技巧，因为着色图像所显示的背景色应该保持不变.
首选纯CSS解决方案，但也欢迎使用javascript图像处理方法.
兔子自己:
使用遮罩和混合模式，您可以做到:
.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>