Opacity
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.