Change the color of an image in css (jquery)

Question

Change the color of an image in css (jquery)

Navigation

#1 by (3 votes)
#2 by (0 votes)

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 one point in my application, several changes in my css are made to completely change the color of things, invoking this 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 does not work.

How can I change the color by following this jQuery pattern?

html jquery css

asked by anonymous 25.03.2018 / 01:01

2 answers

How to "copy" text from one div to another with JQuery? Binding inside a CompositeCollection does not work

score 3 · Answer 1

One of the simple techniques that you can do and put the image in% with% and then put preto e branco over it, using color rgba, or Hexadecimal with transparency as you see fit. This makes it easy for you to change the color values later with jQuery or JS.

See an example of the same multi-color image with CSS only. I encapsulated the image in a película de cor and put a div filter after using a grayscale(100%) pseudo element in ::after I placed a colored film over the image and used div to make a "mix" between the color and the image.

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

OBS: I left comments in 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>

CSS filters documentation: link

Mix-Blend-Mode documentation: link

score 0 · Answer 2

To change the color of the image, you can use the filter attribute.

$(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><imgsrc="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: link