Kazi ya hue-rotate

Kazi hue-rotate inaruhusu kubadilisha urahisi wa rangi ya picha ya usuli kupitia mzunguko wa kivuli kwenye mduara wa rangi. Thamani za sifa zinaonyeshwa kwa digrii, zikiashiria pembe ya mduara wa rangi. Thamani 0 au 360 inaashiria, kwamba picha inabaki bila kubadilika, na nambari yoyote iliyo ndani ya anuwai hii husababisha mabadiliko ya kivuli cha usuli. Kwa chaguo-msingi thamani ni 0deg.

Ki sintaksia

kichaguzi {
	filter: hue-rotate(kona);
}

Mfano

Wacha tuweke urahisi wa rangi ya picha yetu sawa na 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;
}

Mfano

Sasa tuweke urahisi wa rangi ya picha sawa na 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;
}

Mfano

Wacha tusiache thamani katika sifa 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;
}

Angalia pia

kazi blur,
ambayo inapuzisha usuli
kazi brightness,
ambayo huweka mwangaza wa usuli
kazi contrast,
ambayo huweka utofautishi wa usuli
kazi drop-shadow,
ambayo huweka kivuli cha usuli
kazi invert,
ambayo inabadilisha upande wa rangi za usuli
kazi opacity,
ambayo huweka uwazi wa usuli
kazi sepia,
ambayo hubadilisha usuli kuwa sepia
sifa background,
inayowakilisha sifa iliyofupishwa kwa usuli
sifa background-image,
ambayo kwa kutumia kizuizi kunaweza kupewa picha ya usuli
sifa filter,
ambayo huweka mtindo kwa usuli