Opacity for all browsers - resolved

When you need to set opacity or transparency for a div, or any visual element in fact you can do it in CSS.

Today’s standard is to use the opacity keyword like this

opacity: 0.44; 

The problem is this won’t work for all browsers so you need to set many CSS statements in order to work in different web browsers.

Here is the more general approach for element transparency (opacity).

#elemenopacity{

    /* this one is for IE 5+. */
    filter:alpha(opacity=44);    
   
    /* this is for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=44)";     

    /* Netscape Navigator. */
   -moz-opacity:0.44;     

    /* old Safary */
   -khtml-opacity: 0.44;

     /*standard in CSS, forks from Chrome, FF, Safari, Opera and should work in IE9 */
    opacity: 0.44; 
}

However if you are familiar with jQuery you can use this line of code:

jQuery(document).ready(function(){ 
    jQuery("#elementopacity").css('opacity','.44');
});

As you may see jQuery is the most elegant solution.

tags: & category: -