Hue-rotate-funktio
hue-rotate-funktio mahdollistaa
taustakuvan värillisyyden muuttamisen
väriympyrän sävykierron avulla. Ominaisuuden arvot ilmoitetaan asteina, jotka edustavat
väriympyrän kulmaa. Arvo 0 tai 360 tarkoittaa,
että kuva pysyy muuttumattomana, ja mikä tahansa tämän
alueen sisällä oleva luku johtaa taustan sävyn muutokseen.
Oletusarvo on 0deg.
Syntaksi
valitsija {
filter: hue-rotate(kulma);
}
Esimerkki
Asetetaan kuvamme värillisyys
arvoon 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;
}
:
Esimerkki
Asetetaan nyt kuvan värillisyys
arvoon 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;
}
:
Esimerkki
Jätetään hue-rotate-ominaisuuteen
arvo asettamatta:
<div id="elem"></div>
#elem {
filter: hue-rotate();
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Katso myös
-
funktio
blur,
joka sumentaa taustan -
funktio
brightness,
joka asettaa taustan kirkkauden -
funktio
contrast,
joka asettaa taustan kontrastin -
funktio
drop-shadow,
joka asettaa taustalle varjon -
funktio
invert,
joka kääntää taustan värit -
funktio
opacity,
joka asettaa taustan läpinäkyvyyden -
funktio
sepia,
joka muuntaa taustan sepiaksi -
ominaisuus
background,
joka on taustan lyhennysominaisuus -
ominaisuus
background-image,
jolla elementille voidaan antaa taustakuva -
ominaisuus
filter,
joka asettaa tyylin taustalle