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

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

Piemērs

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

Результат:

Piemērs

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

Результат:

Piemērs

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

Результат:

Skatiet arī