Uma das técnicas simples que vc pode fazer e colocar a imagem em preto e branco
e depois colocar uma película de cor
por cima dela, usando cor rgba, ou Hexadecimal com transparência conforme vc achar melhor. Assim facilita para vc trocar os valores das cores depois com o jQuery ou JS.
Veja um exemplo da mesma imagem em várias cores apenas com CSS. Encapsulei a imagem em uma div
e coloquei um filtro grayscale(100%)
depois usando um pseudo elemento ::after
na div
eu coloquei uma película colorida por cima da imagem e usei um mix-blend-mode
para fazer uma "mistura" entre a cor e a imagem.
Veja que no exemplo abaixo eu fiz um blend com "scree
" e outro com "overlay
", vc pode usar qualquer outro blend-mode e ainda ajustar o canal Alpha no cor rgba
para ter um resultado melhor para cada tipo de imagem.
OBS: deixei uns comentários no CSS para te ajudar
* {
padding: 0;
margin: 0;
box-sizing: border-box;
line-height: 0;
}
div {
display: inline-block;
position: relative;
}
div[class] img {
filter: grayscale(100%); /* filtro que deixa a imagem preto e branco */
}
div[class]::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
div.red::after {
background-color: rgba(255, 0, 0, .5); /* .5 é onde vc contra a opacidade da cor rgbA*/
mix-blend-mode: screen; /* aqui vc pode testar outrs filtros para ver o que da o melhor resultado para sua imagem*/
}
div.blue::after {
background-color: rgba(0, 0, 255, .5);
mix-blend-mode: overlay;
}
<div><img src="http://placecage.com/130/250" alt=""></div>
<div class="peb" ><img src="http://placecage.com/130/250" alt="cor"></div>
<div class="red" ><img src="http://placecage.com/130/250" alt="cor"></div>
<div class="blue"><img src="http://placecage.com/130/250" alt="cor"></div>
Documentação sobre os filtros de CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Documentação sobre o Mix-Blend-Mode: https://developer.mozilla.org/pt-BR/docs/Web/CSS/mix-blend-mode
CSS
não muda cores de partes especificas de imagem... você poderia adotar mudar a imagem em si. Tendo varias imagens para seus vários esquemas de cores simplesmente mude osrc
da imagem.var bordaMenina = document.getElementById("dtb61iMap"); bordaMenina.src = "img/corpo_meninaY.png";
mas não funcionou.