Функция hue-rotate

Die Funktion hue-rotate ermöglicht es, die Farbigkeit eines Hintergrundbildes durch Drehung des Farbtons im Farbkreis zu ändern. Die Werte der Eigenschaft werden in Grad angegeben, die den Winkel des Farbkreises bezeichnen. Der Wert 0 oder 360 bedeutet, dass das Bild unverändert bleibt, und jede Zahl innerhalb dieses Bereichs führt zu einer Änderung des Farbtons des Hintergrunds. Standardmäßig ist der Wert 0deg.

Syntax

Selector {
	filter: hue-rotate(Winkel);
}

Beispiel

Lassen Sie uns für unser Bild die Farbigkeit auf 150deg setzen:

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

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

Beispiel

Setzen wir nun die Farbigkeit des Bildes auf 50deg:

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

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

Beispiel

Lassen Sie uns den Wert in der Eigenschaft hue-rotate nicht setzen:

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

#elem {
	filter: hue-rotate();
	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 invert,
die die Farben des Hintergrunds invertiert
die Funktion opacity,
die die Transparenz des Hintergrunds setzt
die Funktion sepia,
die den Hintergrund in Sepia umwandelt
die Eigenschaft background,
die eine Kurzform-Eigenschaft 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