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