Como preencher imagem png com css [fechado]

Question

Preciso preencher a imagem com cor por dentro, mas não por fora com css

Temos png

O que eu faço

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

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

O que eu preciso

Answer 1

Use seu primeiro PNG e torne apenas o exterior transparente, então você pode usar essa imagem como máscara e também como plano de fundo para considerar as linhas pretas:

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

Aqui está a imagem usada para entender melhor:

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

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

---

Uma versão otimizada usando variáveis ​​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>