2

Tenho uma imagem na minha página:

<img style="border:0;" src="img/corpo_menina.png" alt="" width="320" height="480" usemap="#dtb61iMap" id="dtb61iMap" />

Em um momento da minha aplicação, várias mudanças no meu css são feitas para mudar totalmente a cor das coisas, invocando isso com chamadas jquery como segue abaixo:

 $("body").css({"background-color" : "black"});

Porém, também preciso fazer isso com essa imagem, mas um simples background-color não adianta.

Como posso mudar a cor seguindo esse padrão jQuery?

5
  • 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 o src da imagem. Commented 25/03/2018 às 0:11
  • tentei isso também, fiz isso: var bordaMenina = document.getElementById("dtb61iMap"); bordaMenina.src = "img/corpo_meninaY.png"; mas não funcionou.
    – Dr.G
    Commented 25/03/2018 às 0:33
  • Vc quer mudar a cor ou o src da imagem?
    – Sam
    Commented 25/03/2018 às 3:23
  • É melhor trabalhar alterando o src da imagem mesmo.
    – Sveen
    Commented 25/03/2018 às 4:42
  • vc quer que a imagem fique monocromática (tipo sempre a mesma imagem só que com cores diferentes) ou quer trocar o arquivo da imagem tipo vermelho.jpg por amarelo.jpg etc.
    – hugocsl
    Commented 25/03/2018 às 21:54

2 Respostas 2

3

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

0

Para alterar a cor da imagem, você pode usar o atributo filter.

$(document).ready(function(){
  $('img').css('filter', 'brightness(0.3)');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://http2.mlstatic.com/papel-de-parede-autoadesivo-cachoeira-paisagem-natureza-3m-D_NQ_NP_706801-MLB20418926269_092015-F.jpg" />

Mais informações sobre o atributo: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .