Gjennomsiktighet gjennom opacity-egenskapen i CSS
Gjennomsiktighet for et element kan også angis
via egenskapen opacity. Denne egenskapen
tar også desimalverdier fra 0
til 1. Samtidig angis gjennomsiktigheten
for hele elementet samtidig: dets tekst,
bakgrunn og ramme.
Se eksempel:
<div id="parent">
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
</div>
#parent {
background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
padding: 30px;
}
#elem {
width: 300px;
height: 200px;
padding: 10px;
font-size: 50px;
font-weight: bold;
border: 20px solid red;
background: black;
color: red;
opacity: 0.7;
}
:
La oss si at du har et bakgrunnsbilde.
Plasser to blokker med tekst,
ramme og bakgrunn på toppen av den.
Demonstrer forskjellen på gjennomsiktighet via
opacity og via rgba på disse
blokkene.
