Funksjonen brightness
Funksjonen brightness lar deg endre
lysstyrken på bakgrunnsbildet. Den opprinnelige lysstyrken
på bakgrunnen bestemmes av verdien 100% eller 1,
ved å redusere disse reduseres også lysstyrken på bildet.
Tilsvarende øker lysstyrken når verdien økes over 100%.
Negative verdier brukes ikke,
og en tom verdi blir automatisk oppfattet
som 1.
Syntaks
velger {
filter: brightness(tall);
}
Eksempel
La oss sette lysstyrken på bildet vårt
til 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;
}
:
Eksempel
Og la oss nå øke lysstyrken på bildet
til 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;
}
:
Eksempel
La oss sette den opprinnelige lysstyrken for bildet vårt:
<div id="elem"></div>
#elem {
filter: brightness(1);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Se også
-
funksjonen
blur,
som uskarpgjør bakgrunnen -
funksjonen
contrast,
som setter kontrasten på bakgrunnen -
funksjonen
drop-shadow,
som setter skygge på bakgrunnen -
funksjonen
hue-rotate,
som setter fargetone på bakgrunnen -
funksjonen
invert,
som inverterer bakgrunnens farger -
funksjonen
opacity,
som setter gjennomsiktighet på bakgrunnen -
funksjonen
sepia,
som konverterer bakgrunnen til sepia -
egenskapen
background,
som er en forkortelse for bakgrunn -
egenskapen
background-image,
som lar deg sette bakgrunnsbilde på et element -
egenskapen
filter,
som setter stil for bakgrunnen