Eigenschaft mix-blend-mode

Die Eigenschaft mix-blend-mode legt den Mischmodus für die Überlagerung einer Quellfarbe mit einer Hintergrundfarbe oder einem Hintergrundbild fest. Die Werte für die Eigenschaft ähneln den Hauptmodi von Grafikbearbeitungsprogrammen.

Syntax

Selektor {
	mix-blend-mode: Werte;
}

Die Tabelle zeigt die Hauptwerte für die Eigenschaft mix-blend-mode:

Werte

Wert	Beschreibung
`normal`	Normal. Es wird keine Farbmischung verwendet. Standardmodus.
`multiply`	Multiplizieren. In diesem Modus wird der Wert der Quellfarbe mit dem Wert der Hintergrundfarbe multipliziert. Die resultierende Farbe ist immer eine dunklere Farbe.
`screen`	Negativ multiplizieren. In diesem Modus werden die invertierten Werte der Quell- und Hintergrundfarbe multipliziert. Als resultierende Farbe wird immer eine hellere Farbe verwendet.
`overlay`	Überlagern. In diesem Modus werden die Farben multipliziert oder aufgehellt, abhängig von der Hintergrundfarbe. Muster oder Farben überlagern vorhandene Pixel und lassen die hellen und dunklen Bereiche der Hintergrundfarbe unverändert.

Beispiel

Sehen wir uns an, wie ein Bild mit dem Standardwert der Eigenschaft mix-blend-mode aussieht:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

Beispiel

Ändern wir nun den Mischmodus auf Multiplizieren:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

Beispiel

Legen wir für die Eigenschaft mix-blend-mode den Wert Überlagern fest:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

Siehe auch

die Eigenschaft background,
die eine Kurzschreibweise für den Hintergrund darstellt
die Eigenschaft background-image,
mit der einem Block ein Hintergrundbild zugewiesen werden kann
die Eigenschaft background-blend-mode,
mit der ein Hintergrundbild auf eine Hintergrundfarbe überlagert werden kann