mix-blend-mode

Übersicht

Die mix-blend-mode CSS Eigenschaft beschreibt, wie sich der Inhalt des Elements mit dem Inhalt des Elements unter ihm und dem Element-Hintergrund vermischen soll.

Initialwertnormal
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret
Erstellt StapelkontextJa

Syntax

/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

Werte

<blend-mode>
Ein <blend-mode> der den zu verwendenden Mischmodus festlegt. Mehrere Werte können per Komma 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

<svg>
  <circle cx="40" cy="40" r="40" fill="red"/>
  <circle cx="80" cy="40" r="40" fill="lightgreen"/>
  <circle cx="60" cy="80" r="40" fill="blue"/>
</svg>
circle { mix-blend-mode: screen; }

Result

Spezifikationen

Spezifikation Status Kommentar
Compositing and Blending Level 1
Die Definition von 'mix-blend-mode' in dieser Spezifikation.		 Anwärter Empfehlung Initial specification.

Browser Unterstützung

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
mix-blend-modeChrome Vollständige Unterstützung 41Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 32IE Keine Unterstützung NeinOpera Vollständige Unterstützung 28Safari Vollständige Unterstützung 8WebView Android Vollständige Unterstützung 41Chrome Android Vollständige Unterstützung 41Firefox Android Vollständige Unterstützung 32Opera Android Vollständige Unterstützung 28Safari iOS Vollständige Unterstützung 8Samsung Internet Android Vollständige Unterstützung 4.0
On SVG elementsChrome Vollständige Unterstützung 41Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 32IE Keine Unterstützung NeinOpera Vollständige Unterstützung 28Safari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 32Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung

Siehe auch