Funktion invert

Die Funktion invert ermöglicht es, Farben im Hintergrundbild zu invertieren. Der Wert 0 bedeutet, dass das Bild original bleibt. Der Wert 100% oder 1 invertiert die Hintergrundfarben vollständig. Jede Zahl in diesem Bereich invertiert die Farben teilweise. Ein negativer Wert ist nicht zulässig. Standardmäßig ist der Wert 0.

Syntax

Selektor {
	filter: invert(Zahl);
}

Beispiel

Lassen Sie uns die Farben unseres Bildes auf 50% invertieren:

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

#elem {
	filter: invert(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Lassen Sie uns nun die Farben unseres Bildes auf 100% invertieren:

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

#elem {
	filter: invert(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Beispiel

Lassen Sie uns nun in der Funktion invert den Wert 0 setzen:

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

#elem {
	filter: invert(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Siehe auch

die Funktion blur,
die den Hintergrund unscharf macht
die Funktion brightness,
die die Helligkeit des Hintergrunds setzt
die Funktion contrast,
die den Kontrast des Hintergrunds setzt
die Funktion drop-shadow,
die einen Schatten für den Hintergrund setzt
die Funktion hue-rotate,
die die Farbgebung des Hintergrunds setzt
die Funktion opacity,
die die Transparenz des Hintergrunds setzt
die Funktion sepia,
die den Hintergrund in Sepia umwandelt
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 filter,
die den Stil für den Hintergrund setzt