Mischmodi

The CSS Podcast – 024: Blend Modes

Duotone ist eine beliebte Farbbehandlung bei Fotografien. Dadurch sieht ein Bild so aus, als wäre es nur aus zwei kontrastierenden Farben: eine für Highlights und eine für schwache Lichter. Wie gehen Sie dazu mit CSS vor?

Mithilfe von Mischmodi – und anderen Techniken, die Sie kennengelernt haben, wie Filter und Pseudoelemente: Sie können diesen Effekt auf jedes Bild anwenden.

Was ist der Mischmodus?

Mischmodi werden häufig in Designtools wie Photoshop verwendet. Kombinieren Sie Farben aus zwei oder mehr Schichten, um einen Kompositionseffekt zu erzeugen. Wenn Sie ändern, wie Farben gemischt werden, können Sie wirklich interessante visuelle Effekte erzielen. Sie können auch Mischmodi verwenden. z. B. das Isolieren eines Bildes mit weißem Hintergrund, sodass sie einen transparenten Hintergrund hat.

Sie können die meisten Mischmodi, die in einem Designtool verfügbar sind, mithilfe der mix-blend-mode oder die background-blend-mode-Properties. Mit „mix-blend-mode“ wird ein gesamtes Element überlagert und background-blend-mode wendet eine Verschmelzung auf den Hintergrund eines Elements an.

Sie verwenden background-blend-mode, wenn Sie mehrere Hintergründe für ein Element haben und möchten, dass sie ineinander übergehen.

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

Mischmodi lassen sich in zwei Kategorien unterteilen: trennbar und nicht trennbar. Ein trennbarer Mischmodus berücksichtigt jede Farbkomponente, wie RGB, einzeln zu sortieren. 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 Standard-Mischmodus. Es ändert nichts daran, wie ein Element in andere Elemente übergeht.

Multiplizieren

Im Mischmodus „multiply“ werden mehrere Folien übereinander gestapelt. Weiße Pixel erscheinen transparent, und schwarze Pixel erscheinen schwarz. Alles dazwischen multipliziert seine Leuchtdichtewerte (Licht). Das bedeutet, dass Licht viel heller und dunkler wird. und führt meist zu einem dunkleren Ergebnis.

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

Display

Mit screen werden die light-Werte multipliziert. Dies ist ein Umkehreffekt zu multiply, und führt meist zu einem helleren Ergebnis.

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

Overlay

In diesem Mischmodus – overlay – werden multiply und screen kombiniert. Die dunklen Grundfarben werden dunkler und die hellen Grundfarben heller. Farben aus dem mittleren Bereich, wie z. B. 50% Grau, sind davon nicht betroffen.

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

Abdunkeln

Im Mischmodus „darken“ wird die Leuchtkraft des Quellbilds und des Hintergrundbilds verglichen und wählt die dunkelste aus. Dazu werden die RGB-Werte und nicht die Leuchtdichte verglichen, wie es bei multiply und screen der Fall wäre. für jeden Farbkanal. Mit darken und lighten werden durch diesen Vergleich häufig neue Farbwerte erstellt.

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

Lighten

Die Verwendung von lighten bewirkt genau das 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 sehen in diesem Modus keinen Effekt.

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

Farbig nachbelichten

Der Mischmodus „color-burn“ ähnelt dem Mischmodus „multiply“, erhöht aber den Kontrast, wodurch gesättigte Mitteltöne und weniger Spitzlichter entstehen.

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

Hartes Licht

Die Verwendung von hard-light sorgt für einen kräftigen Kontrast. Bei diesem Mischmodus werden die Leuchtdichtewerte entweder gefiltert oder multipliziert. Wenn der Pixelwert heller als 50% Grau ist, wird das Bild aufgehellt. als ob sie geprüft worden wäre. Ist es dunkler, wird es multipliziert.

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

Weiches Licht

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

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

Differenz

Sie können sich die Funktionsweise von difference ein wenig vorstellen wie ein Negativ. Im Mischmodus „difference“ wird der Differenzwert jedes Pixels invertierenden 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 ähnelt der von difference, aber statt Schwarz für identische Pixel zurückzugeben, wird 50% Grau angezeigt, was zu einer weicheren Ausgabe mit weniger Kontrast führt.

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

Nicht trennbare Mischmodi

Diese Mischmodi können Sie sich wie HSL-Komponenten vom Typ color vorstellen. Jede verwendet einen bestimmten Komponentenwert aus dem aktiven Layer und vermischt ihn mit anderen Komponentenwerten.

Farbton

Im Mischmodus „hue“ wird der Farbton der Quellfarbe verwendet und wendet ihn auf die Sättigung und Leuchtkraft der Hintergrundfarbe an.

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

Sättigung

Das funktioniert wie hue, Wenn Sie jedoch saturation als Mischmodus verwenden, wird die Sättigung der Quellfarbe angewendet. dem Farbton und der Leuchtkraft der Hintergrundfarbe angepasst.

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

Farbe

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

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

Leuchtkraft

Schließlich ist luminosity der Kehrwert von color. Es erzeugt eine Farbe mit der Leuchtkraft der Quellfarbe und dem Farbton und der Sättigung der Hintergrundfarbe.

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

Das Attribut isolation

Wenn Sie den isolation festlegen den Wert isolate haben, wird ein neuer Stapelkontext erstellt. Dadurch wird verhindert, dass es mit einer Hintergrundebene überlagert wird. Wie Sie im Z-Index-Modul gelernt haben, sollten Sie beim Erstellen eines neuen Stapelkontexts wird diese Ebene zur Basisebene. Das bedeutet, dass die Mischmodi auf übergeordneter Ebene nicht mehr angewendet werden. Elemente innerhalb eines Elements mit dem Wert isolation: isolate können jedoch weiterhin zusammengeführt werden.

Dies funktioniert nicht mit background-blend-mode weil die Hintergrundeigenschaft bereits isoliert ist.

Wissen testen

Testen Sie Ihr Wissen über Mischmodi