hue-rotate-funksie
Die funksie hue-rotate laat jou
die kleurtint van 'n agtergrondbeeld verander
deur die tint op die kleurwiel te draai. Die waarde word in grade gespesifiseer, wat die
hoek op die kleurwiel aandui. 'n Waarde van 0 of 360 beteken
dat die beeld onveranderd bly, en enige getal binne
hierdie reeks verander die tint van die agtergrond.
Die verstekwaarde is 0deg.
Sintaksis
selektor {
filter: hue-rotate(hoek);
}
Voorbeeld
Laat ons die kleurtint van ons beeld stel op
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;
}
:
Voorbeeld
Laat ons nou die kleurtint van die beeld stel op
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;
}
:
Voorbeeld
Laat ons geen waarde vir die
hue-rotate eienskap spesifiseer nie:
<div id="elem"></div>
#elem {
filter: hue-rotate();
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Sien ook
-
die funksie
blur,
wat die agtergrond vervaag -
die funksie
brightness,
wat die helderheid van die agtergrond stel -
die funksie
contrast,
wat die kontras van die agtergrond stel -
die funksie
drop-shadow,
wat 'n skaduwee vir die agtergrond skep -
die funksie
invert,
wat die agtergrondkleure omkeer -
die funksie
opacity,
wat die deursigtigheid van die agtergrond stel -
die funksie
sepia,
wat die agtergrond na sepia omskakel -
die eienskap
background,
wat 'n kortkode-eienskap vir die agtergrond is -
die eienskap
background-image,
wat gebruik word om 'n agtergrondbeeld vir 'n blok te stel -
die eienskap
filter,
wat die styl vir die agtergrond spesifiseer