Funksjonen hue-rotate

Funksjonen hue-rotate lar deg endre fargemetningen til bakgrunnsbilde ved å rotere fargetonen på fargehjulet. Verdiene for egenskapen angis i grader, som representerer vinkelen på fargehjulet. Verdien 0 eller 360 betyr at bildet forblir uendret, mens ethvert tall innenfor dette området fører til en endring i bakgrunnens fargetone. Standardverdien er 0deg.

Syntaks

velger {
	filter: hue-rotate(vinkel);
}

Eksempel

La oss sette fargemetningen for bildet vårt til 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;
}

Eksempel

La oss nå sette bildets fargemetning til 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;
}

Eksempel

La oss ikke sette noen verdi i egenskapen 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;
}

Se også

funksjonen blur,
som uskarpgjør bakgrunnen
funksjonen brightness,
som setter lysstyrke på bakgrunnen
funksjonen contrast,
som setter kontrast på bakgrunnen
funksjonen drop-shadow,
som setter skygge på bakgrunnen
funksjonen invert,
som inverterer bakgrunnens farger
funksjonen opacity,
som setter gjennomsiktighet på bakgrunnen
funksjonen sepia,
som konverterer bakgrunnen til sepia
egenskapen background,
som er en sammentrengt egenskap for bakgrunn
egenskapen background-image,
som brukes til å sette bakgrunnsbilde på et element
egenskapen filter,
som setter stil for bakgrunnen