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%);
}
Mit dem Mauszeiger über das Bild fahren!
div#bsp6 {
background-image: url("bild.png");
width: 444px;
height: 207px;
background-blend-mode: Hard-Light;
transition: background-color 3s;
}
div#bsp6:hover {
background-color: Gold;
}
Mit dem Mauszeiger über das Bild fahren!
div#bsp7 {
background-image: url("bild.png");
width: 444px;
height: 207px;
background-blend-mode: Hard-Light;
transition: background-color 3s;
}
div#bsp7:hover {
background-color: Gold;
backdrop-filter: sepia(90%);
}
Siehe auch: Bilder-Farbrotation mit Gradient