Bearbeiten von Bildern in CSS: Mischmodi

() translation by (you can also view the original English article)

Im vorherigen Tutorial dieser Serie haben wir erläutert, wie CSS-Filter zum Bearbeiten von Bildern verwendet werden. Filter können zwar zu großartigen Ergebnissen führen, sind aber auf eine einzelne Ebene beschränkt.

Angenommen, Sie haben ein Bild und möchten es mit roter Farbe überlagern. Mit Filtern können Sie dieses nicht tun. Die Mischmodi, auch Blend-Modi, sind jedoch perfekt für diesen Job. Sie sind eigentlich dazu gedacht, die Vordergrund- und Hintergrundfarbwerte zu nehmen, einige Berechnungen durchzuführen und dann eine endgültige Farbe zurückzugeben. Das endgültige Bild, das Sie erhalten, ist das Ergebnis all dieser Berechnungen über jedes überlappende Pixel.

An example of what the blending area would be between two photos

Mit Mischmodi können Sie nicht nur Bilder und Farben, sondern auch Text und Bilder mischen. In diesem Tutorial zeige ich, wie man Mischmodi verwendet, um Bilder zu manipulieren und einige coole Effekte zu erstellen.

Verfügbare Mischmodi

Normal: In diesem Modus ist die endgültige Farbe die oberste Farbe. Der Wert der unteren Farbe hat keinen Einfluss auf das Endergebnis.
Multiplizieren: In diesem Modus werden die oberen und unteren Farben multipliziert, um die endgültige Farbe zu erhalten. Die resultierende Farbe wird immer mindestens so dunkel sein wie eines der Bestandteile. Dies bedeutet, dass bei einer schwarzen Ebene das Endergebnis immer schwarz ist. Die Verwendung einer weißen Ebene hat keinerlei Auswirkungen auf das Endergebnis.
Screen: In diesem Modus wird die endgültige Farbe ermittelt, indem die oberen und unteren Farben invertieren, multipliziert und dann erneut das Ergebnis umgekehrt werden. Die endgültige Farbe ist immer so hell wie die obere oder untere Farbe. Dies bedeutet, dass die Verwendung einer weißen Ebene alles weiß macht und eine schwarze Ebene keinen Einfluss auf das Endergebnis hat.
Overlay: In diesem Modus wird die endgültige Farbe durch Multiplikation oder Überprüfung der Originalfarben basierend auf der unteren Farbe erhalten. Wenn die untere Farbe dunkler ist, werden die ursprünglichen Farben multipliziert, und wenn sie heller ist, werden sie abgeschirmt. Die Lichter und Schatten der unteren Farbe bleiben in diesem Modus erhalten.
Abdunkeln: Dieser ist ziemlich einfach. Die finale Farbe in diesem Modus ist die im Vergleich zwischen der oberen und unteren Ebene dunklere Farbe.
Aufhellen: Dies ist die Umkehrung von abdunkeln, und die endgültige Farbe ist daher die im Vergleich zwischen der oberen und unteren Ebene hellere Farbe.
Farb-Dodge: In diesem Modus wird die untere Farbe durch die Umkehrung der oberen Farbe geteilt, um den endgültigen Wert zu erhalten. In diesem Modus werden keine Änderungen mit schwarzem Hintergrund sichtbar. Wenn die obere Farbe die Umkehrung der unteren Farbe ist, ist die endgültige Farbe eine vollständig beleuchtete Version der oberen Farbe.
Farb-Burn: Die endgültige Farbe in diesem Modus wird erzeugt, indem die Umkehrung der unteren Farbe durch den oberen Farbwert dividiert und der resultierende Wert umgekehrt wird. Wenn die obere Farbe weiß ist, werden keine Änderungen sichtbar. Eine obere Farbe, die die Umkehrung der unteren Farbe ist, führt zu einem vollständig schwarzen Bild.
Hard-Light: Der Hard-Light-Modus ist die Umkehrung des Overlay-Modus. In diesem Fall werden die Originalfarben multipliziert, wenn die obere Farbe dunkler ist, und wenn sie heller ist, werden sie abgeschirmt. Es ist im Grunde der Overlay-Modus mit getauschten Ebenen.
Soft-Light: Dieser Modus ist wie Hard-Light, liefert aber weichere Endergebnisse.
Differenze: Dieser Modus subtrahiert den Wert der dunkleren Farbe von der helleren Farbe, um den endgültigen Wert abzubekommen. Dies impliziert, dass die Farbe Schwarz keine Wirkung hat, während Weiß die Farbe der anderen Ebene umkehrt.
Ausschluss: Dieser Mischmodus ähnelt der Differenz, aber das Endergebnis hat einen geringeren Kontrast.
Farbton: Dieser Mischmodus verwendet den Farbton der oberen Farbe und die Sättigung und Helligkeit der unteren Farbe, um die endgültige Farbe zu erstellen.
Sättigung: In diesem Modus hat die endgültige Farbe die Sättigung der oberen Farbe und den Farbton und die Leuchtkraft der unteren Farbe.
Farbe: Dieser Mischmodus erzeugt eine endgültige Farbe mit dem Farbton und der Sättigung der oberen Farbe und der Leuchtkraft der unteren Farbe. Dieser Modus behält die Graustufen der unteren Farbe bei und kann verwendet werden, um farbige Bilder zu färben.
Leuchtkraft: Die endgültige Farbe in diesem Modus hat die Leuchtkraft der obersten Farbe, während die Farbton- und Sättigungswerte von der unteren Farbe stammen. Er ist wie der Farbton Modus, aber mit getauschten Ebenen.

Darüber hinaus gibt es zwei Möglichkeiten, Mischmodi zu verwenden. Sie können den mix-blend-mode verwenden, der bestimmt, wie der Inhalt eines Elements mit dem Inhalt des darunter liegenden Elements sowie mit dem Hintergrund des Elements vermischt wird. Der background-blend-mode hingegen bestimmt, wie sich die Hintergrundbilder eines Elements miteinander und mit der Hintergrundfarbe des Elements vermischen.

Sie können mit dieser Demo spielen, um zu sehen, wie verschiedene Bilder und Farben basierend auf den angewendeten Mischmodi interagieren. Ich habe auch ein Bild unten angefügt, das die Verschmelzung einer gelblichen Farbe mit dem Quellbild zeigt.

Example of image blended with yellowish color using different blend modes

Erstellen unregelmäßiger Grenzen

Während Bilder im Allgemeinen meist rechteckig sind, kann die Verwendung von Bildern mit unregelmäßigen Grenzen sie optisch ansprechender machen und ihnen eine ganz andere Bedeutung verleihen. Betrachten Sie dieses Bild eines kahlen Adlers gemischt mit der Karte der Vereinigten Staaten. Es symbolisiert die amerikanischen Werte, die durch den kahlen Adler repräsentiert werden. Sie könnten auch einige andere Bilder in ähnlicher Weise kombinieren.

Combining US map with a bald eagle image

Hier habe ich zwei Bilder so kombiniert, dass das Endergebnis die Form des ersten Bildes und die Farben des zweiten Bildes hat. Welche Mischmodi können diesen Effekt Ihrer Meinung nach erzielen?

Ein Hinweis hier ist, dass die Karte ganz schwarz und weiß ist. Also, jeder Mischmodus, den wir verwenden, muss den gesamten Teil über dem weißen Teil ausblenden und den gesamten Teil über dem schwarzen Teil anzeigen. Der Aufhellen-Mischmodus macht diese Aufgabe perfekt. Da die Farbe Weiß im Vergleich zu den Farben im Adler heller ist, versteckt sie den Adler, wenn er sich über die Karte der Vereinigten Staaten hinaus erstreckt.

Sie sollten als Übung versuchen, den anderen Mischmodus zu erraten, der diesen Effekt erzielen kann. Sie können verschiedene Mischmodi in dieser Adler-Demo ausprobieren, um zu sehen, ob Sie den Mischmodus richtig erraten haben.

Überlagern von bunten Farbverläufen

Ob Sie es glauben oder nicht, das bunte Bild unten ist das Ergebnis sorgfältig ausgewählter Farbverläufe und Mischmodi. Sie können den Mauszeiger über das Bild bewegen, um die Originalversion anzuzeigen.

Wenn Sie diesen Effekt neu erstellen möchten, müssen Sie mit einem Bild beginnen, das einen dunklen Hintergrund hat, um optimale Ergebnisse zu erzielen. Als Nächstes entscheiden Sie die Farben, die Sie einblenden möchten, und erstellen Sie einen linearen Farbverlauf mit all diesen Farben. Sie können optional weitere Farbverläufe in verschiedenen Winkeln hinzufügen. Stellen Sie am Ende den ersten background-blend-mode auf luminosity ein. Ihr endgültiges CSS sollte etwa so aussehen:

div {
  background: url('image-url'), linear-gradient(red, orange, yellow, green, blue, indigo, violet), linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  background-blend-mode: luminosity, overlay;
  // More CSS rules
}

Sie sollten mit verschiedenen Mischmodi und Bildern in der ursprünglichen Demo experimentieren, um die beste Kombination von Mischmodi für verschiedene Arten von Bildern zu finden.

Überblenden von Text

Blend-Modi sind nicht auf Bilder beschränkt. Sie können auch Mischmodi auf ein Textstück anwenden. In der folgenden Abbildung habe ich einen Mischmodus auf alle Zeichen sowie das Hintergrundbild angewendet.

Die Zeichen verwenden die mix-blend-mode-Eigenschaft, und der Text verwendet den background-blend-mode. Hier ist das relevante CSS:

body {
  background: #D63 url('image-url') no-repeat;
  background-blend-mode: multiply;
  background-size: cover;
}

h1 span {
  mix-blend-mode: hard-light;
}


Wie bei früheren Demos würde ich vorschlagen, dass Sie auch in dieser Demo mit verschiedenen Mischmodi experimentieren.

Letzte Gedanken

Mit ein wenig Phantasie sind die Möglichkeiten mit Mischmodi endlos. Ich hoffe, dieses Tutorial lehrte Sie etwas Nützliches über Mischmodi und Bildbearbeitung. Üben Sie weiter und Sie werden wirklich gut in der Verwendung von verschiedenen Mischmodi werden.

Wenn Sie etwas Interessantes mit Mischmodi erstellt haben, teilen Sie bitte Ihre Arbeit in den Kommentaren unten.