css透明度总结

       近年来，CSS不透明算得上是一种相当流行的技术，但在跨浏览器支持上，对于开发者来说，可以说是一件令人头疼的事情。目前还没有一个通用方法，以确保透明度设置可以在目前使用的所有浏览器上有效。本文主要通过一些代码来说明如何实用CSS透明度才可以让其兼容你的浏览器。

1.旧版本的opacity设置

      以下代码是在FireFox和Safari旧版本中的透明度设置

#myOpacity{
       -khtml-opacity:0.5;
       -moz-opacity:0.5;
    }

   

2.在现代浏览器中的opacity设置

    以下代码是除了IE9，IE8，IE7，IE6以外所有当前浏览器（chrome,firefox,opera,safari,IE9+）最为简单的透明度设置

#myOpacity{
     opacity:0.5;
}

       上面语法是将一个元素设置为50%的透明度。特别注意，opacity:1 表示将元素设置为不透明，opacity:0 表示将一个元素设置为完全透明。另外，opacity的属性值可以精确到小数点后两位（如，0.56），但是一般情况下只要小数点后以为就足够了，因为我们肉眼很难分辨出这细微的差别。

3.在IE9，IE8，IE7，IE6中的opacity设置

      设置透明度代码如下

#myOpacity{
     filter:alpha(opacity=50);
}

    注意，在种形式中，opacity值的范围是0-100，数值越低说明越接近透明。

4.使用javascript改变css透明度

       你可以使用下面的语法访问JavaScript中的CSS opacity 属性：

   document.getElementById("myOpacity").style.opacity="0.5";      
      //适用于2中所提到的浏览器
   document.getElementById("myOpacity").style.filter="alpha(opacity=50)";     
      //适用于3中所提到的浏览器

5.实用jQuery改变css透明度

      直接使用jQuery设置CSS透明度更直观更容易实现，因为在所有浏览器代码都一样，并且你不必担心在IE下元素是否要触发haslayout:

$("#myOpacity").css({"opacity":"0.5"});  //所有浏览器有效

当然你也可以使一个元素动画透明：

$("#myOpacity").animate({opacity:0.5},1000,function(){
  //回调函数
});

           如果以上内容有错漏，欢迎大家指正，我很乐意改正并且和大家进行交流。