opacity:0.5 makes the whole element half-transparent — including all its children, which you can't undo on a child. For a translucent background only, use an rgba/hsla color. Opacity below 1 creates a new stacking context.
opacity:0.5 makes the whole element half-transparent — including all its children, which you can't undo on a child. For a translucent background only, use an rgba/hsla color. Opacity below 1 creates a new stacking context.
<!doctype html><html><head><meta charset="utf-8">
<style>.a{opacity:.5}.b{background:rgba(179,136,255,.4)}div{padding:14px;color:#e6e0ff;margin:6px 0;background:#b388ff}</style></head><body style="background:#06040d;padding:20px"><div class="a">whole element faded</div><div class="b">only background translucent</div></body></html>