CSS Blend-Mode

CSS Blend-Mode - Ist ein Mischmodus um zwei Ebenen (Hintergrundbild und   Hintergrundfarbe) anhand von Farbformeln visuell miteinander zu verschmelzen.

div#bsp1 {
 background-image: url(bild.png);
 width: 444px;
 height: 207px;
 background-color: Red;
 background-blend-mode: Screen;
}

Für die Eigenschaft können folgende Werte verwendet werden: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color und luminosity.

div#bsp2 {
 background-image: url(bild.png);
 width: 444px;
 height: 207px;
 background-color: Red;
 background-blend-mode: Difference;
}

div#bsp3 {
 background-image: url(bild.png);
 width: 444px;
 height: 207px;
 background-color: Orange;
 background-blend-mode: Luminosity;
}

In Kombination mit » CSS-Filter lassen sich noch viele andere Effekte damit erzielen.

div#bsp4 {
 background-image: url(bild.png);
 width: 444px;
 height: 207px;
 background-color: Gold;
 background-blend-mode: Luminosity;
 filter: brightness(0.7);
}

div#bsp5 {
 background-image: url(bild.png);
 width: 444px;
 height: 207px;
 background-color: Gold;
 background-blend-mode: Luminosity;
 filter: invert(100%);
}

Die Browserunterstützung ist mittlerweile sehr gut, einzig Microsoft Internet Explorer/Edge unterstützen noch kein Blend-Mode.

div#bsp6 {
 background-image: url(../css/img/bild_1.png);
 width: 444px;
 height: 207px;
 background-blend-mode: Hard-Light;
 transition: background-color 3s;
}
div#bsp6:hover {
 background-color: Gold;
}