Funktionen opacity
Funktionen opacity låter dig
ändra genomskinligheten för en bakgrundsbild.
Värdet 100% eller 1 behåller
bildens ursprungliga genomskinlighet.
Värdet 0 betyder
att bilden blir helt genomskinlig.
Ett tal inom
detta intervall anger delvis genomskinlighet för bakgrunden.
Negativa värden kan inte anges.
Standardvärdet är 1.
Syntax
selektor {
filter: opacity(tal);
}
Exempel
Låt oss ställa in genomskinligheten för vår bild till
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;
}
:
Exempel
Och låt oss nu ställa in genomskinligheten till
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;
}
:
Exempel
Och låt oss nu ange ett värde
i funktionen opacity som är
lika med 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 även
-
funktionen
blur,
som oskärper bakgrunden -
funktionen
brightness,
som ställer in ljusstyrkan för bakgrunden -
funktionen
contrast,
som ställer in kontrasten för bakgrunden -
funktionen
drop-shadow,
som lägger till en skugga på bakgrunden -
funktionen
hue-rotate,
som ställer in nyansen för bakgrunden -
funktionen
invert,
som inverterar bakgrundens färger -
funktionen
sepia,
som omvandlar bakgrunden till sepia -
egenskapen
background,
som är en genvägsegenskap för bakgrunden -
egenskapen
background-image,
som låter dig ställa in en bakgrundsbild för ett element