CSS Property opacity
The opacity property
in CSS specifies the transparency of an element.
Summary
| Item | Value |
|---|---|
| Initial value | 1 |
| Inherited | no |
| Version | CSS3 |
| JavaScript syntax | object.style.opacity=0.5 |
| Applies to | All elements |
CSS Syntax
opacity: value|inherit;
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| value | Set the opacity from transparent(0.0) to opaque(1.0) |
| inherit | Inherti the opacity property from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
opacity |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use opacity CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
div {<!--from w ww . j a v a 2 s . co m-->
width: 100px;
height: 100px;
border: 1px solid rgb(200, 200, 200);
opacity: 0.7;
}
div#one {
background: pink;
position: absolute;
top: 0;
left: 0;
}
div#two {
background: lightblue;
position: absolute;
top: 0;
right: 0;
}
div#three {
background: yellowgreen;
position: absolute;
bottom: 0;
left: 0;
}
div#four {
background: orange;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,
sit amet sem quis orci malesuada
magna. Quisque ac est et nibh
lacinia et, eleifend quis,
facilisis et, consequat eu,
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet,
sit amet sem quis orci malesuada
magna. Quisque ac est et nibh
lacinia et, eleifend quis,
facilisis et, consequat eu,
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet,
sit amet sem quis orci malesuada
magna. Quisque ac est et nibh
lacinia et, eleifend quis,
facilisis et, consequat eu,
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet,
sit amet sem quis orci malesuada
magna. Quisque ac est et nibh
lacinia et, eleifend quis,
facilisis et, consequat eu,
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet,
sit amet sem quis orci malesuada
magna. Quisque ac est et nibh
lacinia et, eleifend quis,
facilisis et, consequat eu,
Vestibulum sed felis.
</p>
<p>
Lorem ipsum dolor sit amet,
sit amet sem quis orci malesuada
magna. Quisque ac est et nibh
lacinia et, eleifend quis,
facilisis et, consequat eu,
Vestibulum sed felis.
</p>
<div id='one'></div>
<div id='two'></div>
<div id='three'></div>
<div id='four'></div>
</body>
</html>