我有一個影像：
- 白色像素：我想將這些動態設定為任何顏色
- 黑色像素：我希望這些保持黑色
- 透明像素：我希望這些能夠通過它當前所在的任何背景顯示。
這是覆寫在紅色背景上的影像示例：
我希望能夠為兔子著色任何我喜歡的顏色，而無需使用背景技巧，因為著色影像所對應的背景顏色應該保持不變。
首選純 CSS 解決方案，但也歡迎使用 javascript 影像處理想法。
兔子本身：
uj5u.com熱心網友回復：
使用蒙版和混合模式，您可以做到：
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445445.html