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
Welche der folgenden Optionen sind CSS-Mischmodi?
Welchen Mischmodus benötigen Sie, wenn Sie verschiedene Farben auf unterschiedliche Weise kombinieren möchten?