CROSS BROWSER OPACITY


If you want transparent background div without the image then this article will help you . The transparent_div class gives you the transparent output of the div on which you will add this class. This CSS supported in modern browser as well as the old browser. The following is the code snippet is the css cross browser opacity. 

.transparent_div
{   

  /* modern browsers */
  opacity: 0.7;

-ms-filter: “alpha(opacity=70)”;  /* ie 8 */


  /* IE 5-7 */
  filter: alpha(opacity=70);

  /* Netscape */
  -moz-opacity: 0.7;


  /* Safari 1.x */
  -khtml-opacity: 0.7;

}

From above syntax of the cross browser opacity using the css that supports in the most of all browsers find the some explanation details.

Modern browsers supports the opacity css. Some older Internet Explorer browser supports the -ms-filter css for the cross browser opacity.  Safari browsers supports the -khtml-opacity css. Netscape supports the -moz-opacity css. I think all cross browser opacity cover in this post and it also known as  the web kit opacity supports for many different browser.

 

For Example:
See the following example in this tutorial to understand more about this cross browser opacity and its a bundle of the web kit opacity. The following is the basic level tutorial for the web kit opacity and we can see the opacity color of the child blue div on the image.
 

cross browser transparency

 

<style>
 body{font-family:Verdana, Arial, Helvetica, sans-serif; }
 .parent { width:400px;height:300px;margin:auto;padding-top:100px; background-color:#af0000;line-height:200px; vertical-align:middle;}
 .child { width:200px;height:100px;margin:auto;background-color:#0c3776; text-align:center;line-height:100px;color:#FFFFFF}

.transparent_div

 { 

/* modern browsers */

   opacity: 0.7;

-ms-filter: “alpha(opacity=570)”;  /* ie 8 */


/* IE 5-7 */

   filter: alpha(opacity=70);

/* Netscape */

   -moz-opacity: 0.7;

/* Safari 1.x */

   -khtml-opacity: 0.7;

}

</style>

<div class=”parent”>

     <div class=”child transparent_div”>
 Transparent Child Div </div>
<div class=”child”>
Child Div</div>
</div>

The above example of the cross browser opacity using the only css supports the Modern browsers plus many old browsers. We can also set the background image opacity by adding background image css to the html div element. If want to know more that how to apply the image as background using the css then visit the following related link.

CSS BACKGROUND IMAGE PROPERTY TUTORIAL

FIXED POSITION BACKGROUND IMAGE CSS

See related articles:
Dynamic CSS Rounded Corners Buttons
Beautiful Text Shadow Using CSS 
Customize Text Area Resize Using CSS



Kalpesh Patel

Founder Of Nexus Software Group Leading IT solution and service provider and offering a full range of application development and I.T. consultancy services. Nexus Software Group Contributors In: post free ads online in India and post free ads online in USA