浏览器下透明的那些事，经常会遇到，先前有同事问我，一直没来总结下，今天总算有点时间归纳下。针对不同的浏览器，使用css实现透明效果，可以使用不同的设置，大伙往下看呗!。

IE使用私有属性filter:alpha(opacity)，

Moz Family使用私有属性-moz-opacity，

而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。

后面的数值是透明度，使用百分比或者小数，数值越小，透明度越高。

filter:alpha(opacity=50); /* IE私有属性 */

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

-moz-opacity:0.5; /* Firefox私有属性 */

opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/

在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须；

而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。

为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，IE团队推荐实现透明的方式是：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

opacity: .5;

而目前简单最好用的实现方式是：

filter:alpha(opacity=30);

opacity:.3;

看完这个应该觉得很简单了吧，其实在我们做手机项目的时候，经常会遇到透明的问题，比如弹出层等。好拉，先写到这里吧~！

该文章由WP-AutoPost插件自动采集发布

原文地址:http://www.jiangweishan.com/article/touming.html

浅谈在不同浏览器下的透明问题

付费节点推荐