Funksjonen opacity
Funksjonen opacity lar
deg endre gjennomsiktigheten til bakgrunnsbildet.
Verdien 100% eller 1 beholder
bildets opprinnelige gjennomsiktighet.
Verdien 0 betyr
at bildet blir helt gjennomsiktig.
Et hvilket som helst tall innenfor
dette området setter delvis gjennomsiktighet for bakgrunnen.
Negativ verdi kan ikke settes.
Standardverdien er 1.
Syntaks
velger {
filter: opacity(tall);
}
Eksempel
La oss sette gjennomsiktigheten på bildet vårt til
50%:
<div id="elem"></div>
#elem {
filter: opacity(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Eksempel
Og la oss nå sette gjennomsiktigheten til
100%:
<div id="elem"></div>
#elem {
filter: opacity(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Eksempel
Og la oss nå sette
funksjonen opacity til verdien
0:
<div id="elem"></div>
#elem {
filter: opacity(0);
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
brightness,
som setter lysstyrke på bakgrunnen -
funksjonen
contrast,
som setter kontrast 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
sepia,
som konverterer bakgrunnen til sepia -
egenskapen
background,
som er en sammentrekkende egenskap for bakgrunn -
egenskapen
background-image,
som brukes til å sette bakgrunnsbilde på et element