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

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

Príklad

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

Результат:

Príklad

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

Результат:

Príklad

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

Результат:

Pozrite tiež