Funcția hue-rotate

Funcția hue-rotate permite modificarea colorității imaginii de fundal prin rotirea nuanței pe cercul cromatic. Valorile proprietății sunt indicate în grade, reprezentând unghiul cercului cromatic. Valoarea 0 sau 360 indică că imaginea rămâne neschimbată, iar orice număr cuprins în acest interval duce la modificarea nuanței fundalului. În mod implicit, valoarea este 0deg.

Sintaxă

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

Exemplu

Să setăm pentru imaginea noastră o coloritate egală cu 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;
}

Exemplu

Acum să setăm coloritatea imaginii egală cu 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;
}

Exemplu

Să nu specificăm valoarea în proprietatea 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;
}

Vedeți și

funcția blur,
care estompează fundalul
funcția brightness,
care setează luminozitatea fundalului
funcția contrast,
care setează contrastul fundalului
funcția drop-shadow,
care adaugă umbră fundalului
funcția invert,
care inversează culorile fundalului
funcția opacity,
care setează transparența fundalului
funcția sepia,
care transformă fundalul în sepia
proprietatea background,
reprezentând o proprietate prescurtată pentru fundal
proprietatea background-image,
cu care unui bloc i se poate atribui o imagine de fundal
proprietatea filter,
care definește stilul pentru fundal