invert-funktio
invert-funktio mahdollistaa
taustakuvan värien kääntämisen.
Arvo 0 tarkoittaa,
että kuva pysyy alkuperäisenä. Arvo
100% tai 1 kääntää taustan värit täysin.
Mikä tahansa tällä
alueella oleva luku kääntää värit osittain.
Negatiivista arvoa ei voi asettaa.
Oletusarvo on 0.
Syntaksi
valitsija {
filter: invert(luku);
}
Esimerkki
Käännetään kuvamme värit arvoon
50%:
<div id="elem"></div>
#elem {
filter: invert(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Esimerkki
Käännetään nyt kuvamme värit arvoon
100%:
<div id="elem"></div>
#elem {
filter: invert(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Esimerkki
Asetetaan nyt
invert-funktiolle arvo
0:
<div id="elem"></div>
#elem {
filter: invert(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Katso myös
-
blur-funktio,
joka sumentaa taustan -
brightness-funktio,
joka asettaa taustan kirkkauden -
contrast-funktio,
joka asettaa taustan kontrastin -
drop-shadow-funktio,
joka asettaa taustalle varjon -
hue-rotate-funktio,
joka asettaa taustan värisävykierron -
opacity-funktio,
joka asettaa taustan läpinäkyvyyden -
sepia-funktio,
joka muuntaa taustan sepiaksi -
background-ominaisuus,
joka on lyhennysominaisuus taustalle -
background-image-ominaisuus,
jolla elementille voidaan asettaa taustakuva -
filter-ominaisuus,
joka asettaa tyylin taustalle