How to “tint” image with css

Question

I try to tint an image with the background attribute like this:

相关标签:

Answer 1

You can achieve this using mix-blend-mode which currently has ~88% support. You can use the same markup as before.

<div class="image-holder">
  <img src="https://dummyimage.com/200x200/fff/000000.png" />
</div>

But use this css:

div.image-holder {
  transition: background-color .2s;
  width: min-content;
}

div.image-holder:hover {
  background-color: #EBEFF7;
}

img {
  display: block;
  /* Blend with parents background: */
  mix-blend-mode: multiply;
}

For this demo you are wanting to tint whites towards your chosen color so you want to use the multiply blend mode. If you are wanting to tint blacks then use the screen blend mode.

Codepen Demo

Answer 2

I used some combined filters for tinting an image completely. Tinting is not possible directly (with filters), but you can paint it sepia, adapt saturation and brightness, and get the desired color by using hue-rotate... I think it was something like this ...

img {
  filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
}

You will need to adapt it to your needs... Hope that helps.

Best regards, Alex

Answer 3

Depending on your browser support use filter, many options at your disposal, caniuse.com looks promising http://caniuse.com/#search=css%20filter :-

filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

Answer 4

Using :before selector you can tint images with different colors

.image-holder {
  height: 200px;
  width: 200px;
  position:relative; 
}    
.image-holder:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,255,255, 0.5);
  transition: all .3s linear;
}
.image-holder:hover:before { 
  background: none;
}

<div class="image-holder">
    <img src="http://lorempixel.com/200/200" />
</div>

Answer 5

It's not exactly a real tint but this is the way I find easier to achieve a color layer over an image. The trick is to use an absolute layer with rgba color over an image. It works perfectly for my general cases. Have a go!

.mycontainer{
  position:relative;
  width:50%;
  margin:auto;
}

.overtint {
  position:absolute;
  background-color: rgba(255,0,0,0.6);
  width:100%; height:100%;
}

img{ width:100%;}

a:hover .overtint { 
  background-color: rgba(0,255,0,0.6); 
  transition-duration: .5s;
}

<div class="mycontainer">
  <a href="#">
    <div class="overtint"></div>
    <img src="https://via.placeholder.com/300x150">
  </a>
</div>

Answer 6

Changing the opacity of the parent container changes all children. make a separate div to control your tint. I hammered something together, but the essentials are there.

.image-holder {
  position: relative;
  max-height: 250px;
  max-width: 200px;
}

.image-holder img {
  display: block;
  opacity: 0.5;
  max-width: 100%;
  max-height: inherit;
}

.tint {
  position: absolute;
  max-height: 250px;
  max-width: 200px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  background: #00f;
  transition: opacity 1s;
}

.image-holder:hover .tint {
  opacity: 1;
}

<div class="image-holder">
  <div class='tint'></div>
  <img src="http://lorempixel.com/200/200" />
</div>