The CSS Podcast – 024: Blend Modes
Duotone ist eine beliebte Farbbehandlung für Fotografie, bei der ein Bild so aussieht, als bestünde es nur aus zwei kontrastierenden Farben: eine für Lichter und die andere für Schatten. Wie geht das mit CSS?
Mithilfe von Überblendungsmodi und anderen Techniken, die Sie bereits kennen, z. B. Filter und Pseudoelemente, können Sie diesen Effekt auf jedes Bild anwenden.
Was ist ein Mischmodus?
In Designtools wie Photoshop werden häufig Überblendungsmodi verwendet, um durch Mischen von Farben aus zwei oder mehr Ebenen einen Kompositionseffekt zu erzielen. Wenn Sie die Farbmischung ändern, können Sie wirklich interessante visuelle Effekte erzielen. Sie können die Überblendungsmodi auch als Hilfsmittel verwenden, z. B. um ein Bild mit weißem Hintergrund zu isolieren, sodass es einen transparenten Hintergrund hat.
Sie können die meisten in einem Designtool verfügbaren Überblendungsmodi mit CSS verwenden, indem Sie die Eigenschaften mix-blend-mode
oder background-blend-mode
verwenden.
Mit mix-blend-mode
wird ein ganzes Element verschmolzen und mit background-blend-mode
der Hintergrund eines Elements.
Sie verwenden background-blend-mode
, wenn ein Element mehrere Hintergründe hat und diese ineinander übergehen sollen.
Die mix-blend-mode
wirkt sich auf das gesamte Element aus, einschließlich seiner Pseudoelemente.
Ein Anwendungsfall ist das erste Beispiel für ein Duotonbild, bei dem dem Element über seine Pseudoelemente Farbschichten hinzugefügt werden.
Überblendungsmodi lassen sich in zwei Kategorien unterteilen: trennbare und nicht trennbare. Bei einem trennbaren Mischmodus wird jede Farbkomponente, z. B. RGB, einzeln berücksichtigt. Bei einem nicht trennbaren Mischmodus werden alle Farbkomponenten gleich berücksichtigt.
Browserkompatibilität
mix-blend-mode
background-blend-mode
Trennbare Mischmodi
Normal
Dies ist der Standardmischmodus und ändert nichts daran, wie ein Element mit anderen Elementen verschmolzen wird.
Multiplizieren
Der multiply
-Mischmodus ist mit dem Stapeln mehrerer Folien übereinander vergleichbar.
Weiße Pixel erscheinen transparent und schwarze Pixel schwarz.
Bei einem Wert dazwischen werden die Werte für die Leuchtkraft (Licht) multipliziert.
Das bedeutet, dass helle Bereiche viel heller und dunkle Bereiche noch dunkler werden. In den meisten Fällen führt das zu einem dunkleren Ergebnis.
.my-element {
mix-blend-mode: multiply;
}
Bildschirm
Bei Verwendung von screen
werden die Werte für Licht multipliziert. Das ist der umgekehrte Effekt von 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.
Dunkle Grundfarben werden dunkler und helle Grundfarben heller.
Mitteltöne wie 50% Grau sind davon nicht betroffen.
.my-element {
mix-blend-mode: overlay;
}
Abdunkeln
Beim Mischmodus darken
wird die Leuchtkraft der dunklen Farben des Quell- und des Hintergrundbilds verglichen und die dunkelste Farbe ausgewählt.
Dazu werden für jeden Farbkanal RGB-Werte anstelle der Leuchtkraft verglichen (wie es bei multiply
und screen
der Fall wäre).
Bei darken
und lighten
werden durch diesen Vergleichsprozess häufig neue Farbwerte erstellt.
.my-element {
mix-blend-mode: darken;
}
Aufhellen
Mit lighten
wird das Gegenteil von darken
erreicht.
.my-element {
mix-blend-mode: lighten;
}
Farbig abwedeln
Wenn Sie color-dodge
verwenden, wird die Hintergrundfarbe aufgehellt, um die Quellfarbe widerzuspiegeln.
Reine Schwarztöne sind davon nicht betroffen.
.my-element {
mix-blend-mode: color-dodge;
}
Farbig nachbelichten
Der color-burn
-Verblendungsmodus ähnelt dem multiply
-Verblendungsmodus, erhöht aber den Kontrast, was zu gesättigten Mitteltönen und reduzierten Lichtern führt.
.my-element {
mix-blend-mode: color-burn;
}
Hartes Licht
Mit hard-light
wird ein lebendiger Kontrast erzeugt.
Bei diesem Überblendungsmodus werden Leuchtdichtewerte entweder ausgesiebt oder multipliziert.
Wenn der Pixelwert heller als 50% Grau ist, wird das Bild aufgehellt, als wäre es gescreent. Ist sie dunkler, wird sie multipliziert.
.my-element {
mix-blend-mode: hard-light;
}
Weiches Licht
Der soft-light
-Verblendungsmodus ist eine weniger starke Version von overlay
.
Er funktioniert in etwa gleich, aber mit weniger Kontrast.
.my-element {
mix-blend-mode: soft-light;
}
Differenz
Die Funktionsweise von difference
lässt sich gut mit der eines Fotonegativs vergleichen.
Beim difference
-Verblendungsmodus wird der Differenzwert jedes Pixels verwendet, um helle Farben umzukehren.
Sind die Farbwerte identisch, werden sie schwarz.
Unterschiede in den Werten werden umgekehrt.
.my-element {
mix-blend-mode: difference;
}
Ausschluss
Die Verwendung von exclusion
ähnelt der von difference
, aber anstelle von Schwarz für identische Pixel wird 50% Grau zurückgegeben. Das führt zu einer weicheren Ausgabe mit weniger Kontrast.
.my-element {
mix-blend-mode: exclusion;
}
Nicht trennbare Mischmodi
Sie können sich diese Mischmodi als HSL-Farbkomponenten vorstellen. Dabei wird jeweils ein bestimmter Komponentenwert aus der aktiven Ebene mit anderen Komponentenwerten kombiniert.
Farbton
Beim Mischmodus hue
wird der Farbton der Quellfarbe auf die Sättigung und Leuchtkraft der Hintergrundfarbe angewendet.
.my-element {
mix-blend-mode: hue;
}
Sättigung
Dieser Modus funktioniert ähnlich wie hue
. Wenn Sie jedoch 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
Mit dem 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
der Kehrwert von color
.
Dabei wird eine Farbe mit der Leuchtkraft der Quellfarbe und dem Farbton und der Sättigung der Hintergrundfarbe erstellt.
.my-element {
mix-blend-mode: luminosity;
}
Das isolation
-Attribut
Wenn Sie für die Eigenschaft isolation
den Wert isolate
festlegen, wird ein neuer Stapelkontext erstellt, der verhindert, dass sich das Element mit einer Hintergrundebene überlagert.
Wie Sie im Modul zum Z-Index gelernt haben, wird diese Ebene beim Erstellen eines neuen Stapels zum Basis-Layer.
Das bedeutet, dass Mischmodi auf übergeordneter Ebene nicht mehr angewendet werden. Elemente innerhalb eines Elements mit festgelegtem isolation: isolate
können jedoch weiterhin vermischt werden.
Hinweis: Bei background-blend-mode
funktioniert das nicht, da das Hintergrundattribut bereits isoliert ist.
Wissen testen
Ihr Wissen über Überblendungsmodi testen
Welche der folgenden Optionen sind CSS-Überblendungsmodi?
Welchen Art von Überblendungsmodus benötigen Sie, wenn Sie verschiedene Farben auf unterschiedliche Weise überblenden möchten?