Die Eigenschaft background-blend-mode legt, fest wie sich die Farbwerte übereinanderliegender Hintergründe vermischen..
| erlaubte Werte
|
-
normal: keine Vermischung, der Farbwert ist der des Vordergrundes, Standardwert
-
multiply: die Farbwerte werden multipliziert, das Ergebnis ist nicht heller als die Ausgangsfarben
-
screen: die Farbwerte der Komplementärfarben werden multipliziert, das Ergebnis ist nicht dunkler als die Ausgangsfarben
-
overlay: multiply oder screen, abhängig von der Hintergrundfarbe
-
darken: die dunklere der beiden Farben
-
lighten: die hellere der beiden Farben
-
color-dodge: hellt die Hintergrundfarbe auf
-
color-burn: dunkelt die Hintergrundfarbe ab
-
hard-light: multiply oder screen, abhängig von der Vordergrundfarbe
-
soft-light: darken oder lighten, abhängig von den Farbwerten
-
difference: die dunklere Farbe wird von der helleren subtrahiert
-
exclusion: ähnlich wie difference
-
hue: erzeugt eine Farbe mit dem Farbton der Vordergrundfarbe und der Sättigung und Helligkeit der Hintergrundfarbe
-
saturation: erzeugt eine Farbe mit der Sättigung der Vordergrundfarbe und dem Farbton und der Helligkeit der Hintergrundfarbe
-
color: erzeugt eine Farbe mit dem Farbton und der Sättigung der Vordergrundfarbe und der Leuchtkraft der Hintergrundfarbe
-
luminosity: erzeugt eine Farbe mit der Leuchtkraft der Vordergrundfarbe und dem Farbton und der Sättigung der Hintergrundfarbe
- Vererbung steuernde Werte
inherit, initial, unset und revert
- Defaultwert: normal
|
| anwendbar auf
|
alle Block-Elemente (Unterschied Tag Element Attribut)
|
| Browsersupport
|
Details: caniuse.com
|
| Vererbung
|
nein
|
| animierbar
|
nein
|
Beispiel
body { background-color: lime; }
img { background-blend-mode: multiply; }
Beachten Sie: Safari unterstützt die Blend-Modi: hue, saturation, color und luminosity nicht.
Weblinks
Siehe auch
