More “Try it Yourself” examples below.
Definition and Usage
The opacity property sets the opacity level for an element.
The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See “More Examples” below).
| 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 |
CSS Syntax
opacity: number|initial|inherit;
Property Values
| Value | Description |
|---|---|
| number | Specifies the opacity. From 0.0 (fully transparent) to 1.0 (fully opaque) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
How to use JavaScript to change the opacity for an element:
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById(“p1”);
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert(“Your browser doesn’t support this example!”);
}
}
