CSS/Eigenschaften/mix-blend-mode

Die Eigenschaft mix-blend-mode legt, fest wie sich die Farbwerte übereinanderliegender Elemente miteinander und mit dem Hintergrund 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
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

body { background-color: lime; }
img { mix-blend-mode: multiply; }

 

Beachten Sie: Safari unterstützt die Blend-Modi: hue, saturation, color und luminosity nicht.

Weblinks

• Spezifikation (W3C): mix-blend-mode (draft)
• MDN: mix-blend-mode

Siehe auch

CSS/Tutorials/Vermischen mit Blend-Modes