Element opacity vs background rgba()

This example demonstrates the difference between setting CSS opacity property on an element and specifying an rgba() value for its background-color

HTML

<p>opacity: 0.5;</p>
<div id="overall-opacity">This example demonstrates the difference between setting CSS opacity property on an element and specifying an rgba() value for its background-color</div>

<p>background-color: rgba(255,0, 0, 0.5);<p>
<div id="background-opacity">This example demonstrates the difference between setting CSS opacity property on an element and specifying an rgba() value for its background-color</div>

CSS

p {
    margin-top: 20px;
}

#overall-opacity {
    width: 200px;
    height: 200px;
    background: red;
    opacity: 0.5;
}

#background-opacity {
    width: 200px;
    height: 200px;
    background-color: rgba(0,0, 0, 0.5);
}