In CSS wird der Mischmodus (oder Blend Mode) verwendet, um den Weg zu bestimmen, wie zwei Ebenen sich kombinieren oder mischen, um das endgültige zusammengesetzte Bild zu erstellen. Das können Seiteninhalte wie Text, Bilder und Hintergründe sein.
CSS bietet die Eigenschaft “mix-blend-mode”, die den Mischmodus für den Inhalt eines Elements festlegt.
Hier ein Beispiel für den Einsatz der Mix-Blend-Mode-Eigenschaft:
```css
img {
mix-blend-mode: multiply;
}
```
In diesem Fall werden die Farben des Bildes mit den Farben des Hintergrunds gemischt, indem sie multipliziert werden.
Hier sind die verschiedenen Werte, die Sie für die mix-blend-mode-Eigenschaft verwenden können:
- normal: Dies ist der Standardwert und führt zu keiner Änderung.
- multiply: Die Farben der Bilder werden mit den Farben des Hintergrunds multipliziert.
- screen: Invertiert sowohl die Farben des Bildes als auch des Hintergrunds, multipliziert sie und invertiert sie erneut.
- overlay: Kombination aus “multiply” und “screen”. Dunkle Teile werden dunkler und helle Teile heller.
- darken: Wählt die dunklere Farbe, entweder die des Bildes oder des Hintergrunds.
- lighten: Wählt die hellere Farbe, entweder die des Bildes oder des Hintergrunds.
- color-dodge: Hellt die Hintergrundfarbe auf, um die Quellfarbe zu reflektieren.
- color-burn: Dunkelt die Hintergrundfarbe ab, um die Quelle widerzuspiegeln.
- hard-light: Kombination aus “multiply” und “screen”, abhängig von der Quellfarbe.
- soft-light: Ähnlich wie “hard-light”, aber weicher.
- difference: Subtrahiert die dunklere Farbe von der helleren.
- exclusion: Ähnlich wie “difference”, aber mit geringerem Kontrast.
- hue: Erzeugt ein Bild mit der Farbton des Quellbildes und der Helligkeit und Sättigung des Hintergrundbildes.
- saturation: Erzeugt ein Bild mit der Sättigung des Quellbildes und der Helligkeit und dem Farbton des Hintergrundbildes.
- color: Erzeugt ein Bild mit der Farbe des Quellbildes und der Helligkeit des Hintergrundbildes.
- luminosity: Erzeugt ein Bild mit der Helligkeit des Quellbildes und der Sättigung des Hintergrundbildes.
Es ist wichtig zu beachten, dass nicht alle Browser Mischmodi unterstützen. Sie sollten daher sicherstellen, dass Ihr Layout auch ohne Mischmodi funktioniert.
