The opacity property in CSS controls how transparent or opaque an element is. It is commonly used to create visual effects such as fading elements, overlay backgrounds, or highlighting.
Example:
Output:
.webp)
Property Value
This way, child elements remain fully visible.
What is Opacity in CSS ?
The opacity property defines the transparency level of an element. It accepts values from 0 (fully transparent) to 1 (fully visible).
Syntax:
Value: A number between 0.0 (transparent) to 1.0 (opaque)
The opacity property defines the transparency level of an element. It accepts values from 0 (fully transparent) to 1 (fully visible).
Syntax:
selector { opacity: value;}Value: A number between 0.0 (transparent) to 1.0 (opaque)
Key Point
- Opacity affects both the element and its children.
- To avoid child elements becoming transparent, use rgba() color values instead of opacity if you only want to make the background transparent.
- Older browsers like IE8 or earlier require the filter: alpha(opacity=...) fallback.
Example:
<!DOCTYPE html><html>
<head> <style> img.trans { opacity: 0.4; filter: alpha(opacity=40); /* IE8 and earlier */ } </style></head>
<body> <p>Normal Image</p> <img src="rose.jpg" alt="normal rose">
<p>Transparent Image</p> <img class="trans" src="rose.jpg" alt="transparent rose"></body>
</html>Output:
Property Value
| Value | Description |
|---|---|
| 0.0 | Fully transparent ( invisible ) |
| 1.0 | Fully opaque ( default ) |
| 0.1 - 0.9 | Various transparency levels |
| initial | Resets to the default (1.0) |
| inherit | Inherits from the parent element |
Alternative: RGBA for Transparent Background
If you only want a transparent background (not the text or children), use rgba():
If you only want a transparent background (not the text or children), use rgba():
div { background-color: rgba(0, 0, 0, 0.5); /* 50% transparent background */}This way, child elements remain fully visible.