Change the color of an image in css (jquery)

Asked

Viewed 1,244 times

2

I have an image on my page:

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

At a time of my application, various changes in my css are made to totally change the color of things by invoking it with jquery calls as follows::

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

However, I also need to do this with this image, but a simple background-color no use.

How can I change color by following this jQuery pattern?

html jquery css

  • CSS does not change colors of specific parts of image... you could adopt change the image itself. Having several images for your various color schemes simply change the src of the image.

  • I tried that too, I did that: var bordaMenina = document.getElementById("dtb61iMap");&#xA; bordaMenina.src = "img/corpo_meninaY.png"; but it didn’t work.

  • You want to change the color or the src of the image?

  • It is better to work by changing the image src same.

  • you want the image to be monochromatic (type always the same image only with different colors) or you want to change the image file like red.jpg to yellow.jpg etc.

2 answers

3

One of the simple techniques you can do and put the image in preto e branco and then put a película de cor above it, using rgba color, or hexadecimal with transparency as you see fit. This makes it easier for you to change the color values later with jQuery or JS.

See an example of the same image in multiple colors with CSS only. I encapsulated the image in one div and put a filter grayscale(100%) then using a pseudo element ::after in div I put a colored film over the image and used a mix-blend-mode to make a "mix" between the color and the image.

See that in the example below I made a blend with "scree" and another with "overlay", you can use any other blend-mode and still adjust the Alpha channel in color rgba to have a better result for each image type.

OBS: I left some comments on CSS to help you

* {
    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>

Documentation about CSS filters: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Documentation about Mix-Blend-Mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

0

To change the image color, you can use the attribute 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" />

More information about the attribute: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Browser other questions tagged html jquery css

You are not signed in. Login or sign up in order to post.