IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这个世界变化很快，IE8也快出来了，它将不在支持以前{filter:alpha(opacity=50);}的私有属性，转而支持更规范的私有属性-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;加之Firefox2.0和Opera9.0以前版本很少见到，所以所有的主流浏览器都已经支持纯CSS而不用png图片来实现半透明效果，代码是：

<div id="out">

    <div id="in">不透明<div>

    <div id="alpha">半透明<div>

<div>

<style type="text/css">

#out{

   padding:20px 0;

   height:100px;

   width:200px;

   position:relative;

}

#in{

  background:#fff;

  margin:0 10px;

}

#alpha{

     position: absolute;

     top:0;

     left: 0;

     width: 100%;

     height:100%;

     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*IE8*/

     filter:alpha(opacity=30);  /*IE5、IE5.5、IE6、IE7*/

     opacity: .3;  /*Opera9.0+、Firefox1.5+、Safari、Chrome*/

     z-index: -1;  /*让其位于in的下面*/

     background:#fff;

}

</style>