Menu
Advanced Features
CSS Opacity
Transparency from 0.0 (invisible) to 1.0 (solid).
1See Through
Opacity affects the element and all its children.
Example Code
css
div {
opacity: 0.5; /* 50% transparent */
}
/* For background only, use rgba/hsla */
div {
background: rgba(255, 0, 0, 0.5);
}2Understand it in a real interface
Opacity applies to the whole rendered element, including its children. If you only want a translucent background while keeping text opaque, use a color with an alpha channel instead. An element at zero opacity can still affect layout and interaction unless other behavior changes.
3Try it yourself
Create a notice with text and a background. Lower the entire notice’s opacity, then restore it and use an alpha background color. Compare text readability. Inspect whether an invisible interactive element can still receive focus before using opacity to hide controls.
Finished reading?
Mark this topic as complete to track progress.