Функција hue-rotate

Функцијата hue-rotate овозможува да се промени бојата на позадинската слика преку ротирање на нијансата на кругот на боите. Вредностите на својството се наведуваат во степени, што означуваат агол на кругот на боите. Вредноста 0 или 360 означува, дека сликата останува непроменета, а секој број што се наоѓа во овој опсег доведува до промена на нијансата на позадината. Стандардно, вредноста е 0deg.

Синтакса

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

Пример

Ајде да ја поставиме бојата на нашата слика на 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;
}

Пример

Сега да ја поставиме бојата на сликата на 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;
}

Пример

Ајде да не ја поставиме вредноста во својството 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;
}

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

функцијата blur,
која ја заматува позадината
функцијата brightness,
која ја поставува осветленоста на позадината
функцијата contrast,
која ја поставува контрастноста на позадината
функцијата drop-shadow,
која поставува сенка на позадината
функцијата invert,
која ги инвертира боите на позадината
функцијата opacity,
која ја поставува провидноста на позадината
функцијата sepia,
која ја претвора позадината во сепија
својството background,
кое претставува скратено својство за позадина
својството background-image,
со кое на блокот може да се зададе позадинска слика
својството filter,
кое го поставува стилот за позадината