Übersicht

Die background-blend-mode Eigenschaft beschreibt, wie sich die Hintergrundbilder eines Elementes, sowie dessen Hintergrundfarbe, miteinander vemischen.

Die Blending-Verfahren sollten in der selben Reihenfolge wie die Bilder der background-image Eigenschaft definiert werden. Wenn die Anzahl der Blending-Verfahren nicht mit der Anzahl der Hintergrundbilder übereinstimmt,  werden sie wiederholt oder abgeschnitten, bis jedem Hintergrundbild ein Blending-Verfahren zugeordnet werden kann.

Initialwertnormal
Anwendbar aufAlle Elemente. In SVG wird er auf Containerelemente, Grafikelemente und Grafiken referenzierende Elemente angewandt.. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Mediennone
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Ein Wert */
background-blend-mode: normal;

/* Zwei Werte, einer pro Hintergrund */
background-blend-mode: darken, luminosity;

/* Globale Werte */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

Werte

<blend-mode>
Ein <blend-mode> welcher das Verfahren zur Vermischung von Hintergrundbildern und -farbe beschreibt. Es können mehrere Werte mit Kommas getrennt angegeben werden.

Formale Syntax

<blend-mode>#

wobei
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Beispiele

Spezifikationen

Spezifikation Status Kommentar
Compositing and Blending Level 1
Die Definition von 'background-blend-mode' in dieser Spezifikation.
Anwärter Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 35Edge Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise EdgeHTML 18 has an Enable CSS background-blend-mode property flag, however the feature is an early prototype with no discernable end-user effect.
Firefox Vollständige Unterstützung 30IE Keine Unterstützung NeinOpera Vollständige Unterstützung 22Safari Vollständige Unterstützung JaWebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 30Opera Android Vollständige Unterstützung 22Safari iOS Vollständige Unterstützung 8Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, mrstork, Sebastianz, fscholz, kapep
Zuletzt aktualisiert von: SJW,