mix-blend-mode

Springen zu:
  1. Übersicht
  2. Syntax
  3. Beispiele
  4. Spezifikationen
  5. Browser Unterstützung
  6. Siehe auch

Ü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
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik
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 AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 41Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 32IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung 8WebView Android Vollständige Unterstützung 41Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 32Opera Android ? Safari iOS Vollständige Unterstützung 8Samsung Internet Android ?
On SVG elementsChrome Vollständige Unterstützung 41Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 32IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 32Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: ExE-Boss, SJW, Vainamo, Oliver_Schafeld, mrstork, Sebastianz, MaxKoehler
Zuletzt aktualisiert von: ExE-Boss,