When we set the opacity
for a parent element,
all the child elements also inherit the same value:
Opacity of the div is set to 0.5
,
but the child elements h1
and p
also become semi-transparent.
This makes it hard to read the text.
If we want the opacity to apply only to the background,
we can specify the background color value using rgba
instead of using rgb
.
The alpha
parameter sets the opacity.
It takes in any value
ranging from 0.0
to 1.0
: