Funkcia hue-rotate

Funkcia hue-rotate umožňuje zmeniť farebnosť obrázku pozadia prostredníctvom otočenia odtieňa na farebnom kruhu. Hodnoty vlastnosti sa uvádzajú v stupňoch, označujúcich uhol farebného kruhu. Hodnota 0 alebo 360 znamená, že obrázok ostáva nezmenený, a akékoľvek číslo nachádzajúce sa v rámci tohto rozsahu vedie k zmene odtieňa pozadia. Predvolená hodnota je 0deg.

Syntax

selektor {
	filter: hue-rotate(uhol);
}

Príklad

Nastavme pre náš obrázok farebnosť rovnú 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;
}

Príklad

Teraz nastavme farebnosť obrázku rovnú 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;
}

Príklad

Neuvádzajme žiadnu hodnotu vo 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;
}

Pozrite tiež

funkcia blur,
ktorá rozostrí pozadie
funkcia brightness,
ktorá nastaví jas pozadia
funkcia contrast,
ktorá nastaví kontrast pozadia
funkcia drop-shadow,
ktorá nastaví tieň pozadia
funkcia invert,
ktorá invertuje farby pozadia
funkcia opacity,
ktorá nastaví priehľadnosť pozadia
funkcia sepia,
ktorá prevedie pozadie na sépiu
vlastnosť background,
ktorá je skrátenou vlastnosťou pre pozadie
vlastnosť background-image,
pomocou ktorej je možné bloku nastaviť obrázok pozadia
vlastnosť filter,
ktorá nastavuje štýl pre pozadie