CSS Property opacity








The opacity property in CSS specifies the transparency of an element.

Summary

ItemValue
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>

Click to view the demo