Crie uma classe chamada de .branca
para usar sempre que quiser o avatar em branco. Use as propriedades de filter
do CSS, brightness(100)
e pronto, isso vai aumentar o brilho da imagem e "estourar" o branco (como dizem os fotógrafos), o suficiente para deixá-la branca. Se quiser preta troque por brightness(0)
e vai tirar totalmente o brilho da imagem.
Aqui você pode consultar o suporte dos browsers. Obviamente não funciona no IE.
body {
background-color: red;
}
.branca {
filter: brightness(100);
}
.preta {
filter: brightness(0);
}
<img class="" src="https://i.sstatic.net/uzMCi.png">
<img class="branca" src="https://i.sstatic.net/uzMCi.png">
<img class="preta" src="https://i.sstatic.net/uzMCi.png">
Aqui tem um sandbox para você testar os filtros do CSS.
OBS: É interessante testar em imagens deferentes para ter certeza que essa técnica vai funcionar em todos os casos, com imagens pequenas e grandes, .gif, .png, .bmp, .tif, .wmf ou qq outro formato que tenha transparência e seja interpretado pelo browser...
<use>
), mas a pergunta é de PNG :)