Opacity using RGBA

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.

rgba(red, green, blue, alpha)

The alpha parameter sets the opacity. It takes in any value ranging from 0.0 to 1.0: