Eigenschaft background-blend-mode

Die Eigenschaft background-blend-mode legt den Mischmodus für die Überblendung des Hintergrundbildes mit der Hintergrundfarbe oder anderen Bildern fest. In dieser Eigenschaft können auch mehrere Werte durch Komma getrennt angegeben werden, die in derselben Reihenfolge angewendet werden. Die Werte für die Eigenschaft ähneln den Hauptmodi von Grafikbearbeitungsprogrammen.

Syntax

Selektor {
	background-blend-mode: Modi;
}

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

Werte

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

Beispiel

Sehen wir uns an, wie das Bild mit dem Standardwert der Eigenschaft background-blend-mode aussehen wird:

<div id="elem"></div>

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Ändern wir nun den Wert der Eigenschaft background-blend-mode auf Multiplizieren:

<div id="elem"></div>

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Legen wir für unser Bild den Modus Negativ multiplizieren fest:

<div id="elem"></div>

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

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 mix-blend-mode,
mit der Ausgangsfarben auf ein Hintergrundbild überblendet werden können
die Eigenschaft backdrop-filter,
die das Anwenden von Filtern ermöglicht