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

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

Przykład

Ustawmy dla naszego obrazu kolorystykę równą 150deg:

<div id="elem"></div>

#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:

<div id="elem"></div>

#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:

<div id="elem"></div>

#elem {
	filter: hue-rotate();
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Zobacz też

funkcja blur,
którą rozmywa tło
funkcja brightness,
którą ustawia jasność tła
funkcja contrast,
którą ustawia kontrast tła
funkcja drop-shadow,
którą ustawia cień tła
funkcja invert,
którą invertuje kolory tła
funkcja opacity,
którą ustawia przezroczystość tła
funkcja sepia,
którą przekształca tło w sepię
właściwość background,
reprezentująca właściwość-skrót dla tła
właściwość background-image,
za pomocą której blokowi można ustawić obraz tła
właściwość filter,
która ustawia styl dla tła