Funkcja hue-rotate

Funkcja hue-rotate pozwala zmienić kolorystykę obrazu tła poprzez obrót odcienia na kole kolorów. Wartości właściwości podaje się w stopniach, oznaczających kąt koła kolorów. Wartość 0 lub 360 oznacza, że obraz pozostaje niezmieniony, a każda liczba znajdująca się w tym zakresie prowadzi do zmiany odcienia tła. Domyślnie wartość wynosi 0deg.

Składnia

cssselektor {
  filter: hue-rotate(kąt);
}

Przykład

Ustawmy dla naszego obrazu kolorystykę równą 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;
}

Результат:

Przykład

Teraz ustawmy kolorystykę obrazu równą 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;
}

Результат:

Przykład

Nie ustawiajmy wartości we właściwości 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;
}

Результат:

Zobacz też