Wie man ein Bild mit CSS “tönt”.

Ich versuche, ein Bild mit dem Hintergrundattribut wie folgt zu tönen:

.image-holder:hover {
  opacity: 1;
  transition: opacity 1s, background 1s;
  background: #EBEFF7;
}

.image-holder {
  height: 250px;
  width: 200px;
  opacity: 0.5;
  transition: opacity 1s, background 1s;
}

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

http://jsfiddle.net/6ELSF/1047/

Aber das Bild ist nicht wie erwartet “getönt”.

Beim Schweben sieht es so aus:

aber ich möchte, dass es so aussieht:

Ich habe versucht, eine Lösung zu testen, die ich bezüglich der Überlagerung von Bildern gefunden habe, aber in meinem Beispiel hat keine funktioniert. Wie bewerkstelligen Sie dies auf die am wenigsten komplizierte Weise?

Ich habe einige kombinierte Filter verwendet, um ein Bild vollständig zu tönen. Tönung ist nicht direkt möglich (mit Filtern), aber man kann es sepia malen, Sättigung und Helligkeit anpassen und per Hue-Rotate die gewünschte Farbe bekommen… Ich glaube, es war so etwas …

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

Sie müssen es an Ihre Bedürfnisse anpassen.

Abhängig von Ihrer Browserunterstützung Filterviele Optionen stehen Ihnen zur Verfügung, caniuse.com sieht vielversprechend aus 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%);

Verwenden :before Selektor können Sie Bilder einfärben mit verschiedenen Farben

.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>

Dies erreichen Sie mit mix-blend-mode was aktuell hat ~88% Unterstützung. Sie können dasselbe Markup wie zuvor verwenden.

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

Aber benutze dieses 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;
}

Für diese Demo möchten Sie Weißtöne in Richtung Ihrer gewählten Farbe tönen, damit Sie die verwenden möchten multiply Mischmodus. Wenn Sie Schwarz tönen möchten, verwenden Sie die screen Mischmodus.

Codepen-Demo

Das Ändern der Deckkraft des übergeordneten Containers ändert alle untergeordneten Container. Erstellen Sie ein separates Div, um Ihren Farbton zu steuern. Ich habe etwas zusammengehämmert, aber das Wesentliche ist da.

.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>

Es ist nicht gerade ein echter Farbton, aber so finde ich es einfacher, eine Farbschicht über einem Bild zu erzielen. Der Trick besteht darin, eine absolute Ebene mit RGB-Farbe über einem Bild zu verwenden. Es funktioniert perfekt für meine allgemeinen Fälle. Probieren!

.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>