We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Ü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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support

41.0

32.0 (32.0) ? (Ja) 8.0
SVG Nicht unterstützt 32.0 (32.0) ? Nicht unterstützt Nicht unterstützt
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support

41.0

32.0 (32.0) ? ? 8.0
SVG Nicht unterstützt 32.0 (32.0) ? Nicht unterstützt Nicht unterstützt

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Vainamo, Oliver_Schafeld, mrstork, Sebastianz, MaxKoehler
Zuletzt aktualisiert von: Vainamo,