Функция 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;
}

Результат:

Ҳам қаранг