Gennemsigtighed via egenskaben opacity i CSS
Gennemsigtigheden af et element kan også indstilles
via egenskaben opacity. Denne egenskab
tager også decimalværdier fra 0
til 1. Her indstilles gennemsigtigheden
samtidig for hele elementet: dets tekst,
baggrund og ramme.
Se eksemplet:
<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;
}
:
Lad os sige, at du har et baggrundsbillede.
Placer to blokke med tekst,
ramme og baggrund oven på det.
Demonstrer forskellen mellem gennemsigtighed via
opacity og via rgba på disse blokke.
