Функцыя hue-rotate

Функцыя hue-rotate дазваляе змяніць колеравасць фонавага відарыса шляхам павароту адцення на колеравым крузе. Значэнні ўласцівасці пазначаюцца ў градусах, якія абазначаюць вуголь колеравага круга. Значэнне 0 або 360 абазначае, што відарыс застаецца нязменным, а любы лік размешчаны ўнутры гэтага дыяпазону прыводзіць да змены адцення фону. Па змаўчанні значэнне роўнае 0deg.

Сінтаксіс

cssселектар {
  filter: hue-rotate(вуголь);
}

Прыклад

Давайце ўсталюем для нашага відарыса колеравасць роўную 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;
}

Результат:

Прыклад

Цяпер усталюем колеравасць відарыса роўную 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;
}

Результат:

Прыклад

Давайце не праставім значэнне ва ўласцівасці 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;
}

Результат:

Глядзіце таксама