CSS opacity Property
Description
The opacity property can be thought of conceptually as a post processing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.
- Initial value
- 1
- Applies to
- All elements
- Inherited
- No
- Media
- Visual
- Computed value
- The same as the specified value after clipping the [alphavalue] to the range [0.0,1.0]
- Animatable
- No
- CSS Version
- CSS3
- JavaScript syntax
- object.style.opacity
Syntax
opacity: <alphavalue> | inherit
Values
- <alphavalue>A floating-point value between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive. Any values outside the range will be clamped to this range.
- inherit
Example
<div class="opacity"> Example of the css opacity property.</div>body {
background: url(images/tick.png);
}
.opacity {
background: #ccc;
padding: 30px;
opacity: 0.7;
}Give it a Try
Click the button below to experiment with this property.
Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 9 | 12 | 1 | 1 | 9 | 2 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 1 | 18 | 4 | 10.1 | 1 | Yes |
Last updated by CSSPortal on: 16th October 2019