Funktionen hue-rotate

Funktionen hue-rotate giver mulighed for at ændre farvemætningen på et baggrundsbillede ved at rotere farvetonen på farvecirklen. Værdier for egenskaben angives i grader, som angiver vinklen på farvecirklen. Værdien 0 eller 360 betyder, at billedet forbliver uændret, mens ethvert tal inden for dette interval fører til en ændring af baggrundens farvetone. Som standard er værdien sat til 0deg.

Syntaks

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

Eksempel

Lad os indstille farvemætningen for vores billede 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

Lad os nu indstille billedets farvemætning 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

Lad os lade være med at angive en værdi i egenskaben 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å

funktionen blur,
som slører baggrunden
funktionen brightness,
som indstiller lysstyrken på baggrunden
funktionen contrast,
som indstiller kontrasten på baggrunden
funktionen drop-shadow,
som tilføjer en skygge til baggrunden
funktionen invert,
som inverterer baggrundens farver
funktionen opacity,
som indstiller gennemsigtigheden på baggrunden
funktionen sepia,
som omdanner baggrunden til sepia
egenskaben background,
som er en sammentrukket egenskab for baggrunden
egenskaben background-image,
som kan bruges til at tildele et baggrundsbillede til et element
egenskaben filter,
som definerer stilen for baggrunden