Funktionen hue-rotate

Funktionen hue-rotate låter dig ändra färgtonen på en bakgrundsbild genom att rotera nyansen på färghjulet. Egenskapsvärden anges i grader, vilket anger vinkeln på färghjulet. Värdet 0 eller 360 betyder att bilden förblir oförändrad, medan vilket tal som helst inom detta intervall leder till en förändring av bakgrundens nyans. Standardvärdet är 0deg.

Syntax

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

Exempel

Låt oss sätta färgtonen för vår bild till 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;
}

Exempel

Nu sätter vi bildens färgton till 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;
}

Exempel

Låt oss inte sätta något värde 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 även

funktionen blur,
som oskärper bakgrunden
funktionen brightness,
som sätter ljusstyrkan för bakgrunden
funktionen contrast,
som sätter kontrasten för bakgrunden
funktionen drop-shadow,
som sätter en skugga på bakgrunden
funktionen invert,
som inverterar bakgrundens färger
funktionen opacity,
som sätter transparensen för bakgrunden
funktionen sepia,
som omvandlar bakgrunden till sepia
egenskapen background,
som är en genvägsegenskap för bakgrund
egenskapen background-image,
som används för att sätta en bakgrundsbild på ett element
egenskapen filter,
som sätter stilen för bakgrunden