Functie hue-rotate

De functie hue-rotate maakt het mogelijk om de kleurtonen van een achtergrondafbeelding aan te passen door middel van het roteren van de tint op de kleurencirkel. De waarden van de eigenschap worden opgegeven in graden, die de hoek van de kleurencirkel aangeven. De waarde 0 of 360 geeft aan dat de afbeelding onveranderd blijft, en elk getal binnen dit bereik leidt tot een verandering van de achtergrondtint. Standaard is de waarde 0deg.

Syntaxis

selector {
	filter: hue-rotate(hoek);
}

Voorbeeld

Laten we voor onze afbeelding een kleurtoon instellen van 150deg:

<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;
}

Voorbeeld

Laten we nu een kleurtoon voor de afbeelding instellen van 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;
}

Voorbeeld

Laten we geen waarde opgeven in de eigenschap hue-rotate:

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

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

Zie ook

de functie blur,
die de achtergrond vervaagt
de functie brightness,
die de helderheid van de achtergrond instelt
de functie contrast,
die het contrast van de achtergrond instelt
de functie drop-shadow,
die een schaduw voor de achtergrond instelt
de functie invert,
die de achtergrondkleuren inverteert
de functie opacity,
die de transparantie van de achtergrond instelt
de functie sepia,
die de achtergrond omzet naar sepiakleuren
de eigenschap background,
die een verkorte eigenschap voor de achtergrond is
de eigenschap background-image,
waarmee een achtergrondafbeelding voor een blok kan worden ingesteld
de eigenschap filter,
die een stijl voor de achtergrond instelt