#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*/
   background:#fff;
}

简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比,但是需要注意的是,IE下使其私有属性生效必须触发其hasLayout,比如设置容器宽度,最通用的方案是{zoom:1}。)。

从上面的代码中你没有看到Opera。没错,Opera还未支持标准的opacity从Opera9开始支持CSS3的opacity了,也没有其私有的可支持Alpha透明的属性。

但是,我们知道,Opera是支持Alpha透明的PNG图片的(当然Moz Family也支持)。所以我们可以使用背景图片来实现Alpha透明效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


*