Mix-Blend-Modus - CSS-Tricks | CSS-Almanach 2025

Die mix-blend-modeEigenschaft definiert, wie der Inhalt eines Elements mit seinem Hintergrund verschmelzen soll. Zum Beispiel der Text von a

könnte auf interessante Weise mit dem Hintergrund dahinter verschmelzen.

.blend ( mix-blend-mode: exclusion; )

Im obigen Beispiel wurde der Inhalt so geändert mix-blend-mode, dass die Farben des Textes vom Hintergrund ausgeschlossen werden. Dies ist nur einer von vielen Werten für diese Eigenschaft.

Es gibt ein Problem mit Chrome 58+, bei dem mix-blend-modekeine Elemente gerendert werden, die transparent sind . Das Ticket wurde in Chrome als Ausgabe 711955 ausgestellt, die zum Zeitpunkt dieses Schreibens zugewiesen wurde. In der Zwischenzeit besteht eine einfache Lösung darin, dem Körperelement eine weiße (oder wirklich eine beliebige) Hintergrundfarbe zuzuweisen.

Werte

initial: Die Standardeinstellung der Eigenschaft, die keinen Mischmodus festlegt.
inherit: Ein Element erbt den Mischmodus von seinem übergeordneten Element.
unset: Entfernt den aktuellen Mischmodus aus einem Element.
: Dies ist das Attribut eines der folgenden Mischmodi:
normal: Dieses Attribut wendet keinerlei Überblendung an.
multiply: Das Element wird mit dem Hintergrund multipliziert und ersetzt die Hintergrundfarbe. Die resultierende Farbe ist immer so dunkel wie der Hintergrund.
screen: multipliziert den Hintergrund und der Inhalt ergänzt das Ergebnis. Dies führt zu Inhalten, die heller als die sind background-color.
Overlay: Multipliziert oder überprüft den Inhalt abhängig von der Hintergrundfarbe. Dies ist die Umkehrung des Hard-Light-Mischmodus.
abdunkeln: Der Hintergrund wird durch den Inhalt ersetzt, bei dem der Inhalt dunkler ist. Andernfalls bleibt er unverändert.
lighten: Der Hintergrund wird durch den Inhalt ersetzt, bei dem der Inhalt heller ist.
color-dodge: Dieses Attribut hellt die Hintergrundfarbe auf, um die Farbe des Inhalts wiederzugeben.
color-burn: Dies verdunkelt den Hintergrund, um die natürliche Farbe des Inhalts wiederzugeben.
hard-light: Abhängig von der Farbe des Inhalts wird dieses Attribut angezeigt oder multipliziert.
soft-light: Abhängig von der Farbe des Inhalts wird dieser dunkler oder heller.
difference: Dies subtrahiert die dunklere der beiden Farben von der hellsten Farbe.
exclusion: ähnlich, differenceaber mit geringerem Kontrast.
hue: Erstellt eine Farbe mit dem Farbton des Inhalts in Kombination mit der Sättigung und Leuchtkraft des Hintergrunds.
saturation: Erstellt eine Farbe mit der Sättigung des Inhalts kombiniert mit dem Farbton und der Leuchtkraft des Hintergrunds.
color: Erstellt eine Farbe mit dem Farbton und der Sättigung des Inhalts und der Leuchtkraft des Hintergrunds.
luminosity: Erstellt eine Farbe mit der Leuchtkraft des Inhalts und dem Farbton und der Sättigung des Hintergrunds. Dies ist die Umkehrung des colorAttributs.

Es ist erwähnenswert, dass durch Festlegen eines anderen normalMischmodus ein neuer Stapelkontext generiert wird, der dann mit dem Stapelkontext gemischt werden muss, der das Element enthält.

Die Auswirkungen dieser Werte werden in der folgenden Demo gezeigt:

Mehr Informationen

Grundlagen der CSS-Mischmodi
Mix-Blend-Modus auf MDN
Mix-Blend-Modus auf W3C
Eine Sammlung von CSS Blend Mode-Demos
CSS-Mischmodi kennenlernen

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.