Translucency via the opacity property in CSS
The element's translucency can also be set via the opacity property. This property also accepts fractional values from 0 to 1. In this case, translucency is set for the entire element at once: its text, background, and border.
See example:
<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;
}
:
Let's say you have some background image. Place two blocks with text, border and background on top of it. Demonstrate the difference between translucency with opacity and with rgba on these blocks.
