Funktsioon hue-rotate
Funktsioon hue-rotate võimaldab
muuta taustapildi koloratiivsust
tooneringi pööramise teel. Omaduse väärtused määratakse kraadides, mis tähistavad
tooneringi nurka. Väärtus 0 või 360 tähendab,
et pilt jääb muutumatuks, ja iga number sellel
vahemikul põhjustab tausta tooni muutumise.
Vaikimisi on väärtus 0deg.
Süntaks
valija {
filter: hue-rotate(nurk);
}
Näide
Määrame oma pildile koloratiivsuseks
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;
}
:
Näide
Nüüd määrame pildi koloratiivsuseks
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;
}
:
Näide
Jätame omaduse
hue-rotate väärtuse määramata:
<div id="elem"></div>
#elem {
filter: hue-rotate();
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Vaata ka
-
funktsioon
blur,
mis hägustab tausta -
funktsioon
brightness,
mis määrab tausta heleduse -
funktsioon
contrast,
mis määrab tausta kontrastsuse -
funktsioon
drop-shadow,
mis määrab taustale varju -
funktsioon
invert,
mis inverteerib tausta värvid -
funktsioon
opacity,
mis määrab tausta läbipaistvuse -
funktsioon
sepia,
mis muudab tausta seepia värvuseks -
omadus
background,
mis on tausta lühendomadus -
omadus
background-image,
mille abil saab plokile määrata taustapildi -
omadus
filter,
mis määrab tausta stiili