opacity
Description
| Item | Value |
|---|---|
| Initial value | 1 |
| Inherited | no |
| Version | CSS3 |
| JavaScript syntax | object.style.opacity=0.5 |
| Applies to | All elements |
Syntax and Property Values
opacity: value|inherit;
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 |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
div {<!-- ww w . j ava2 s . c o 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>
The code above generates the following result.
