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

Результат:

Погледнете ги и