Mischmodi

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

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

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

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

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?

Overlay
Dullen
Aufhellen
Multiplizieren
Differenz
Aufhellen

Welchen Art von Überblendungsmodus benötigen Sie, wenn Sie verschiedene Farben auf unterschiedliche Weise überblenden möchten?

Nicht trennbar
Trennbar