Funktsioon hue-rotate

Funktsioon hue-rotate võimaldab muuta taustapildi koloratiivsust tooneringi pööramise teel. Omaduse väärtused määratakse kraadides, mis tähistavad tooneringi nurka. Väärtus 0 või 360 tähendab, et pilt jääb muutumatuks, ja iga number sellel vahemikul põhjustab tausta tooni muutumise. Vaikimisi on väärtus 0deg.

Süntaks

valija {
	filter: hue-rotate(nurk);
}

Näide

Määrame oma pildile koloratiivsuseks 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;
}

Näide

Nüüd määrame pildi koloratiivsuseks 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;
}

Näide

Jätame omaduse hue-rotate väärtuse määramata:

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

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

Vaata ka

funktsioon blur,
mis hägustab tausta
funktsioon brightness,
mis määrab tausta heleduse
funktsioon contrast,
mis määrab tausta kontrastsuse
funktsioon drop-shadow,
mis määrab taustale varju
funktsioon invert,
mis inverteerib tausta värvid
funktsioon opacity,
mis määrab tausta läbipaistvuse
funktsioon sepia,
mis muudab tausta seepia värvuseks
omadus background,
mis on tausta lühendomadus
omadus background-image,
mille abil saab plokile määrata taustapildi
omadus filter,
mis määrab tausta stiili