Funkcija hue-rotate

Funkcija hue-rotate ļauj mainīt fona attēla krāsu toņu veicot toņu rotāciju uz krāsu apļa. Īpašības vērtības tiek norādītas grādos, kas apzīmē krāsu apļa leņķi. Vērtība 0 vai 360 apzīmē, ka attēls paliek nemainīgs, bet jebkurš skaitlis, kas atrodas šajā diapazonā, izraisa fona toņa izmaiņas. Pēc noklusējuma vērtība ir 0deg.

Sintakse

selektors {
	filter: hue-rotate(leņķis);
}

Piemērs

Uzstādīsim mūsu attēlam krāsu toni vienādu ar 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;
}

Piemērs

Tagad uzstādīsim attēla krāsu toni vienādu ar 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;
}

Piemērs

Neuzstādīsim vērtību īpašībā 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;
}

Skatiet arī

funkcija blur,
kas izblīvē fonu
funkcija brightness,
kas uzstāda fona spilgtumu
funkcija contrast,
kas uzstāda fona kontrastu
funkcija drop-shadow,
kas uzstāda fona ēnu
funkcija invert,
kas invertē fona krāsas
funkcija opacity,
kas uzstāda fona caurspīdīgumu
funkcija sepia,
kas pārveido fonu sepijā
īpašība background,
kas ir īpašības saīsinājums fonam
īpašība background-image,
ar kuru blokam var uzstādīt fona attēlu
īpašība filter,
kas uzstāda stilu fonam