css opacity/transparency

the opacity css property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.

ie, firefox, chrome, opera, and safari use the property opacity for transparency.

the opacity property can take a value from 0.0 to 1.0 .a value of zero means completely transparent and one means completely solid.

Css opacity property syntax

           opacity: 1 ;
           
           opacity: 0.6 ;
           
           opacity: 0 ;

creating a transparent images

the css looks like this:

   <style  type="text/css" >

 .image {

 width:210pxheight:200px;

 opacity:1.0 ;

 filter:alpha(opacity=100) ;

          }

    </style>

the css looks like this:

   <style  type="text/css" >

 .image {

 width:210pxheight:200px;

 opacity:0.5 ;

 filter:alpha(opacity=50) ;

          }

    </style>

the css looks like this:

   <style  type="text/css" >

 .image {

 width:210pxheight:200px;

 opacity:0.2 ;

 filter:alpha(opacity=20) ;

          }

    </style>


image transparency effect with mouse pointer -:hover effect

   

the css looks like this:

   <style  type="text/css" >

 .image:hover {

 width:210pxheight:200px;

 opacity:1.0 ;

 filter:alpha(opacity=100) ;

               }

    </style>

the css looks like this:

   <style  type="text/css" >

 .image:hover {

 width:210pxheight:200px;

 opacity:0.5 ;

 filter:alpha(opacity=50) ;

              }

    </style>

the css looks like this:

   <style  type="text/css" >

 .image:hover {

 width:210pxheight:200px;

 opacity:0.2 ;

 filter:alpha(opacity=20) ;

               }

    </style>

Css Opacity property example text in transparent box :-

ie1toie9 support the extended form
progid:DXImagetransform.microsoft.alpha(opacity=xx).  ie8 introduced -ms-filter, which is synonymous with filter. both are gone in ie10. similar to -moz-opacity, -khtml-opacity has been dead since early 2004. konqueror never had support for -khtml-opacity and had been supporting opacity since version 4.0.

The complete css html code for above example - css opacity example

           <html>
           
             <head>
             
           <title>this is opacity example </title>
           
           <style   type="type/css">
           
           .topbox{ 
           
                      width:600px ;
                      
                      height:400px ;
                      
                      margin-left:20px ;
                      
                      margin-right:20px ;
                      
                      background:url(http://w3web.com//images//sea.png) repeat scroll  ;
                      
                      background-position:50% 50% ;
                      
                      border:1px solid transparent ;
           }
           .opacitybox{ 
           
                      width:520px ;
                      
                      height:300px ;
                      
                      margin-top:40px ;
                      
                      margin-left:30px ;
                      
                      background-color:#ffffff ;
                      
                      border:1px solid pink ;
                      
                      opacity:0.5 ;
                      
                      filter:alpha(opacity=50) ;
           } 
           .opacitybox p{
           
                      margin:40px 1px 1px 3px ;
                      
                      font-size:22px ;
                      
                      font-weight:bold 
                      
                      color:black ;
                      
                      opacity:0.9 ;
                      
                      filter:alpha(opacity=90) ;
           }
           
    </style>
    
     </head>
     
       <body>
       
<pre>ie1toie9 support the extended form progid:DXImagetransform.microsoft.alpha(opacity=xx).
           
ie8 introduced -ms-filter, which is synonymous with filter. both are gone in ie10.
           
similar to  -moz-opacity, -khtml-opacity has been dead since early 2004.
           
konqueror never had support for -khtml-opacity and had been supporting opacity since version 4.0.</pre>
           
   </body>
           
  </html>

browser compatibility - Css Opacity Property

featurechromefirefoxinternet exploreoperasafari (webkit)

basic support

  1.01.0 (1.7) 9.0  9.0  1.2 

 8.0

filter:  alpha (opacity=xx) 

filter:  "alpha (opacity=xx)" 

(both are synonymous)  

  4.0 

filter:  alpha (opacity=xx)