hue-rotate-funksie

Die funksie hue-rotate laat jou die kleurtint van 'n agtergrondbeeld verander deur die tint op die kleurwiel te draai. Die waarde word in grade gespesifiseer, wat die hoek op die kleurwiel aandui. 'n Waarde van 0 of 360 beteken dat die beeld onveranderd bly, en enige getal binne hierdie reeks verander die tint van die agtergrond. Die verstekwaarde is 0deg.

Sintaksis

selektor {
	filter: hue-rotate(hoek);
}

Voorbeeld

Laat ons die kleurtint van ons beeld stel op 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;
}

Voorbeeld

Laat ons nou die kleurtint van die beeld stel op 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;
}

Voorbeeld

Laat ons geen waarde vir die hue-rotate eienskap spesifiseer nie:

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

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

Sien ook

die funksie blur,
wat die agtergrond vervaag
die funksie brightness,
wat die helderheid van die agtergrond stel
die funksie contrast,
wat die kontras van die agtergrond stel
die funksie drop-shadow,
wat 'n skaduwee vir die agtergrond skep
die funksie invert,
wat die agtergrondkleure omkeer
die funksie opacity,
wat die deursigtigheid van die agtergrond stel
die funksie sepia,
wat die agtergrond na sepia omskakel
die eienskap background,
wat 'n kortkode-eienskap vir die agtergrond is
die eienskap background-image,
wat gebruik word om 'n agtergrondbeeld vir 'n blok te stel
die eienskap filter,
wat die styl vir die agtergrond spesifiseer