Brightness-funktio
Funktio brightness mahdollistaa
taustakuvan kirkkauden muuttamisen. Alkuperäinen kirkkaus
määritetään arvolla 100% tai 1,
ja niiden pienentyessä myös kuvan kirkkaus pienenee.
Vastaavasti, kun arvoa kasvatetaan yli 100%,
kirkkaus kasvaa. Negatiivisia arvoja ei hyväksytä,
ja tyhjä arvo käsitetään automaattisesti
arvoksi 1.
Syntaksi
valitsija {
filter: brightness(luku);
}
Esimerkki
Asetetaan kuvamme kirkkaudeksi
20%:
<div id="elem"></div>
#elem {
filter: brightness(20%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Esimerkki
Ja nyt kasvatetaan kuvan kirkkautta
arvoon 120%:
<div id="elem"></div>
#elem {
filter: brightness(120%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Esimerkki
Palautetaan kuvamme alkuperäinen kirkkaus:
<div id="elem"></div>
#elem {
filter: brightness(1);
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
contrast,
joka asettaa kontrastin taustalle -
funktio
drop-shadow,
joka asettaa varjon taustalle -
funktio
hue-rotate,
joka asettaa värisävyn taustalle -
funktio
invert,
joka kääntää taustan värit -
funktio
opacity,
joka asettaa läpinäkyvyyden taustalle -
funktio
sepia,
joka muuntaa taustan sepiaksi -
ominaisuus
background,
joka on taustan lyhennysominaisuus -
ominaisuus
background-image,
jolla elementille voidaan asettaa taustakuva -
ominaisuus
filter,
joka asettaa tyylin taustalle