如何用css填充png圖像

Question

我需要用里面的顏色填充圖片而不是外面的 css

我們有 png

我所做的

 img { background:#8abfbe; width:200px; }

 <img src="https://i.stack.imgur.com/ze88p.png">

我需要的

Answer 1

使用您的第一個 PNG 並僅使外部透明，然后您可以使用該圖像作為蒙版和背景來考慮黑線：

 .box { width:150px; display:inline-block; -webkit-mask:url(https://i.ibb.co/F5n9N7c/shirt.png) center/contain no-repeat; mask:url(https://i.ibb.co/F5n9N7c/shirt.png) center/contain no-repeat; background:url(https://i.ibb.co/F5n9N7c/shirt.png) center/contain no-repeat; background-blend-mode:darken; } .box:before { content:""; display:block; padding-top:100%; }

 <div class="box" style="background-color:lightblue;"></div> <div class="box" style="background-color:red;"></div> <div class="box" style="background-color:lightgreen;"></div>

這是用於更好地理解的圖像：

 img { background:red; width:150px; }

 <img src="https://i.ibb.co/F5n9N7c/shirt.png">

---

使用 CSS 變量的優化版本：

 .box { width:150px; display:inline-block; --m:url(https://i.ibb.co/F5n9N7c/shirt.png) center/contain no-repeat; -webkit-mask:var(--m); mask:var(--m); background:var(--m) var(--c,transparent); background-blend-mode:darken; } .box:before { content:""; display:block; padding-top:100%; }

 <div class="box" style="--c:lightblue;"></div> <div class="box" style="--c:red;"></div> <div class="box" style="--c:lightgreen;"></div>