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ă

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

Exemplu

Să setăm pentru imaginea noastră o coloritate egală cu 150deg:

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

css#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:

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

css#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:

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

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

Результат:

Vedeți și