More "Try it Yourself" examples below.
The opacity property sets the opacity level for an element.
The opacity-level describes the transparency-level, where 1 is not transparant at all, 0.5 is 50% see-through, and 0 is completely transparent.
| Default value: | 1 |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.opacity="0.5" Try it |
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Note: IE8 and earlier versions supports an alternative, the filter property. Like: filter:Alpha(opacity=50).
| Value | Description | Play it |
|---|---|---|
| number | Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque) | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
How to use JavaScript to change the opacity for an element:
CSS tutorial: CSS Image Opacity / Transparency
HTML DOM reference: opacity property
Your message has been sent to W3Schools.