juniorCSS
Explain opacity vs rgba() for transparency.
Updated Apr 28, 2026
Short answer
opacity applies transparency to the element and all its children, while rgba() only applies transparency to the specific color property.
Deep explanation
When you use opacity: 0.5, the entire DOM node and its descendants become semi-transparent. If you only want a semi-transparent background but want the text to remain fully opaque, you must use an alpha channel color like rgba(0, 0, 0, 0.5) on the background.
Real-world example
Creating a dark semi-transparent overlay over an image that contains fully opaque white text.
Common mistakes
- Using `opacity` for a background overlay and wondering why the text inside it is also fading out.
Follow-up questions
- Does opacity: 0 remove the element from the document flow?