Mischmodi

The CSS Podcast – 024: Blend Modes

Duotone ist eine beliebte Farbbehandlung in der Fotografie. Dadurch wirkt ein Bild so, als sei es nur aus zwei kontrastierenden Farben bestehen: eine für Spitzlichter und eine für schlechte Lichtverhältnisse. Wie funktioniert das mit CSS?

Mit Mischmodi und anderen Methoden, die Sie kennengelernt haben, z. B. Filter und Pseudoelemente, können Sie diesen Effekt auf jedes Bild anwenden.

Was ist ein Mischmodus?

Mischmodi werden häufig in Designtools wie Photoshop verwendet, um einen Kompositionseffekt zu erzielen, indem Farben aus zwei oder mehr Ebenen gemischt werden. Wenn Sie die Art und Weise ändern, wie sich Farben mischen, können Sie wirklich interessante visuelle Effekte erzielen. Sie können auch Mischmodi als Dienstprogramm verwenden, um z. B. ein Bild mit weißem Hintergrund zu isolieren, sodass es einen transparenten Hintergrund zu haben scheint.

Sie können die meisten der in einem Designtool verfügbaren Mischmodi mit CSS über die Properties mix-blend-mode oder background-blend-mode verwenden. Mit mix-blend-mode wird das gesamte Element überlagert, mit background-blend-mode wird der Hintergrund eines Elements überlagert.

Sie verwenden background-blend-mode, wenn es mehrere Hintergründe für ein Element gibt, die alle ineinander übergehen sollen.

mix-blend-mode wirkt sich auf das gesamte Element einschließlich seiner Pseudoelemente aus. Ein Anwendungsfall ist das ursprüngliche Beispiel eines Duoton-Bilds, bei dem über seine Pseudoelemente Farbebenen auf das Element angewendet werden.

Mischmodi lassen sich in zwei Kategorien unterteilen: trennbare und nicht trennbare. Bei einem trennbaren Mischmodus wird jede Farbkomponente, z. B. RGB, einzeln betrachtet. Bei einem nicht trennbaren Mischmodus werden alle Farbkomponenten gleich behandelt.

Browserkompatibilität

mix-blend-mode

background-blend-mode

Trennbare Mischmodi

Normal

Dies ist der standardmäßige Mischmodus. Dadurch ändert sich nichts an der Darstellung eines Elements in andere Elemente.

Multiplizieren

Der Mischmodus „multiply“ ist mit dem Stapeln mehrerer Foliensätze übereinander vergleichbar. Weiße Pixel erscheinen transparent und schwarze Pixel schwarz. Alles dazwischen multipliziert seine Leuchtkraftwerte (hell). Das bedeutet, dass die Lichter viel heller und die dunkleren auch dunkler werden, was meist zu einem dunkleren Ergebnis führt.

.my-element {
  mix-blend-mode: multiply;
}

Display

Mit screen werden die light-Werte multipliziert. Dies ist ein umgekehrter Effekt zu multiply und führt in den meisten Fällen zu einem helleren Ergebnis.

.my-element {
  mix-blend-mode: screen;
}

Overlay

In diesem Mischmodus (overlay) werden multiply und screen kombiniert. Die dunkle Basis wird dunkler und die helle Basisfarbe wird heller. Farben im mittleren Bereich, z. B. ein Grau mit 50 %, sind nicht betroffen.

.my-element {
  mix-blend-mode: overlay;
}

Abdunkeln

Im Mischmodus darken wird die dunkle Leuchtkraft des Quell- und Hintergrundbilds verglichen und die dunkelste der beiden ausgewählt. Dazu werden für jeden Farbkanal die RGB-Werte anstelle der Leuchtkraft verglichen, wie es bei multiply und screen der Fall wäre. Bei darken und lighten werden durch diesen Vergleich häufig neue Farbwerte erstellt.

.my-element {
  mix-blend-mode: darken;
}

Aufhellen

lighten bewirkt das genaue Gegenteil von darken.

.my-element {
  mix-blend-mode: lighten;
}

Farbig abwedeln

Wenn Sie color-dodge verwenden, wird die Hintergrundfarbe aufgehellt, um die Quellfarbe widerzuspiegeln. Rein schwarze Farben haben in diesem Modus keine Auswirkungen.

.my-element {
  mix-blend-mode: color-dodge;
}

Nach Farbe färben

Der Mischmodus color-burn ist dem Mischmodus multiply sehr ähnlich, erhöht jedoch den Kontrast, was zu gesättigten Mitteltönen und weniger Spitzlichtern führt.

.my-element {
  mix-blend-mode: color-burn;
}

Hartes Licht

Mit hard-light wird ein kräftiger Kontrast erzeugt. Dieser Mischmodus blendet entweder die Leuchtdichtewerte ein oder multipliziert sie. Wenn der Pixelwert heller als 50% ist, wird das Bild aufgehellt, so als wäre es gefiltert. Je dunkler es ist, wird es multipliziert.

.my-element {
  mix-blend-mode: hard-light;
}

Weiches Licht

Der Mischmodus „soft-light“ ist eine weniger strenge Version von „overlay“. Sie funktioniert fast auf die gleiche Weise mit weniger Kontrast.

.my-element {
  mix-blend-mode: soft-light;
}

Differenz

Ein gutes Bild von der Funktionsweise von difference ähnelt einem Fotonegativ. Der Mischmodus difference nimmt den Differenzwert jedes Pixels und invertiert die Lichtfarben. Wenn die Farbwerte identisch sind, werden sie schwarz. Unterschiede in den Werten werden invertiert.

.my-element {
  mix-blend-mode: difference;
}

Ausschluss

Die Verwendung von exclusion ist difference sehr ähnlich, aber statt Schwarz wird für identische Pixel zurückgegeben. Stattdessen wird ein Grau von 50% zurückgegeben, was zu einer weicheren Ausgabe mit weniger Kontrast führt.

.my-element {
  mix-blend-mode: exclusion;
}

Nicht trennbare Mischmodi

Sie können sich diese Mischmodi wie HSL-Farbkomponenten vorstellen. Jede übernimmt einen bestimmten Komponentenwert aus der aktiven Ebene und vermischt ihn mit anderen Komponentenwerten.

Farbton

Im Mischmodus hue wird der Farbton der Quellfarbe auf die Sättigung und Leuchtkraft der Hintergrundfarbe angewendet.

.my-element {
  mix-blend-mode: hue;
}

Sättigung

Dies funktioniert wie hue, aber wenn Sie saturation als Mischmodus verwenden, wird die Sättigung der Quellfarbe auf den Farbton und die Leuchtkraft der Hintergrundfarbe angewendet.

.my-element {
  mix-blend-mode: saturation;
}

Farbe

Im Mischmodus color wird eine Farbe aus dem Farbton und der Sättigung der Quellfarbe und der Leuchtkraft der Hintergrundfarbe erstellt.

.my-element {
  mix-blend-mode: color;
}

Leuchtkraft

Schließlich ist luminosity die Umkehrung von color. Sie erzeugt eine Farbe mit der Leuchtkraft der Ausgangsfarbe und dem Farbton und der Sättigung der Hintergrundfarbe.

.my-element {
  mix-blend-mode: luminosity;
}

Das Attribut isolation

Wenn Sie für das Attribut isolation den Wert isolate festlegen, wird ein neuer Stapelkontext erstellt. Dadurch wird verhindert, dass die Eigenschaft mit einer Hintergrundebene übereinander liegt. Wie Sie im Z-Indexmodul gelernt haben, wird diese Ebene beim Erstellen eines neuen Stapelkontexts zur Basisebene. Das bedeutet, dass die Mischmodi auf übergeordneter Ebene nicht mehr angewendet werden. Elemente innerhalb eines Elements, für das isolation: isolate festgelegt ist, können jedoch weiterhin zusammengeführt werden.

Beachten Sie, dass dies nicht mit background-blend-mode funktioniert, da das Hintergrundattribut bereits isoliert ist.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Mischmodi