html - 如何用css填充png图像

Question

我需要用CSS在图片内部填充颜色，而不是在外部填充图片

我们有png

我做什么

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

<img src="/image/ze88p.png">

我需要什么

Answer 1

使用您的第一个 PNG 并仅将外部设为透明，然后您可以使用该图像作为 mask ，也可作为背景来考虑黑线:

.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>