Funkce hue-rotate

Funkce hue-rotate umožňuje změnit barevnost obrázku na pozadí prostřednictvím otočení odstínu na barevném kruhu. Hodnoty vlastnosti se uvádějí ve stupních, které označují úhel barevného kruhu. Hodnota 0 nebo 360 znamená, že obrázek zůstane nezměněn, a jakékoli číslo uvnitř tohoto rozsahu vede ke změně odstínu pozadí. Výchozí hodnota je 0deg.

Syntaxe

selektor {
	filter: hue-rotate(úhel);
}

Příklad

Nastavme našemu obrázku barevnost rovnou 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;
}

Příklad

Nyní nastavme barevnost obrázku rovnou 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;
}

Příklad

Neprostaňme hodnotu ve vlastnosti 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;
}

Viz také

funkce blur,
která rozostřuje pozadí
funkce brightness,
která nastavuje jas pozadí
funkce contrast,
která nastavuje kontrast pozadí
funkce drop-shadow,
která nastavuje stín pozadí
funkce invert,
která invertuje barvy pozadí
funkce opacity,
která nastavuje průhlednost pozadí
funkce sepia,
která převádí pozadí na sépii
vlastnost background,
představující zkratkovou vlastnost pro pozadí
vlastnost background-image,
pomocí které lze bloku nastavit obrázek na pozadí
vlastnost filter,
která nastavuje styl pro pozadí