Функция 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 қасиеті,
ол фонға стиль тағайындайды