Referenz:CSS/Eigenschaften/mix-blend-mode

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft mix-blend-mode CSS 3.0
Beschreibung 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
default-Wert

normal

anwendbar auf alle Block-Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Spezifikation W3c logo klein.gif mix-blend-mode (draft)
Beispiel
body { background-color: lime; }
img { mix-blend-mode: multiply; }
Beachten Sie

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

Tipp