IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
这个世界变化很快，IE8 IE10 IE11也出来了，它将不在支持以前{filter:alpha(opacity=50);}的私有属性，转而支持更规范的私有属性 -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;加之Firefox2.0和 Opera9.0以前版本很少见到，所以所有的主流浏览器都已经支持纯CSS而不用png图片来实现半透明效果，代码是：
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";/*ie8支持*/ filter:alpha(opacity=80);/*IE,finishOpacity=80 ie5、6、7支持*/
以上的代码是IE浏览器下兼容支持，当然如今IE8已经很普遍，所以在以后的开发中建议尽量采用新的IE标准，解析更快。
针对火狐狸浏览器。如今firefox可以说是发展很快，并且统一支持CSS3的标准代码。相信只要使用firefox的用户都是下载的最新版本的，所以firefox可以使用CSS3标准去执行半透明。
opacity:0.8;/*opera9.0+ 、firefox1.5+ 、safan 、Chramo ---CSS3标准属性*/
仅仅这样一条简单的语句就可以实现背景半透明了。moz family浏览器可以使用私有标准：
-moz-opacity:0.5; /*数值是透明度的大小0-1*/
以上CSS也能被FF支持.
值得一提的是CSS背景半透明后,该容器下的所有子对象都会透明,为了解决该问题,目前最常用的方式是,建立一个与半透明背景容器同级别的DIV来放置其他内容,使它们成为兄弟关系,这样就不影响.
把第一个需要半透明的div设置成如下CSS:
.hoverdiv {
position:absolute;
width:170px;
height:100px;
background-color:#FFF;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";/*ie8支持*/
filter:alpha(opacity=80);/*IE,finishOpacity=80 ie5、6、7支持*/
zoom:1;
/*background:rgba(255, 255, 255,20) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明 ie不解析*/
/*filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=20);*/
opacity:0.8;/*opera9.0+ 、firefox1.5+ 、safan 、Chramo ---CSS3标准属性*/
/*overflow:hidden;*/
/*z-index:10;*/
}
把同兄弟关系的第二个div设置成如下:
.hoverdivc {
position:absolute;
width:160px; padding:5px;
}
需要明确的是为2个div都要指定宽度和高度.否则可能会是全屏的宽高.
<div> <div class="hoverdiv"></div> <div class="hoverdiv">这里是你内容。。。。</div> </div>
