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

浏览器下透明的东西，经常遇到，一些同事问我，没有总结，今天终于有一点时间总结。对于不同的浏览器，使用css来实现透明效果，你可以使用不同的设置，我们向下看！。

不同浏览器的私有属性：

IE使用私有属性filter:alpha(opacity)，
Moz Family使用私有属性-moz-opacity，
标准属性是opacity（CSS 3, Moz Family部分支持CSS3)。

以下值为透明度，使用百分比或小数，值越小，透明度越高。

1. filter:alpha(opacity=50); /* IE私有属性 */
2. -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;/*IE8*//
3. -moz-opacity:0.5; /* Firefox私有属性 */
4. opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持*//

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

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

IE中的HTML元素要想透明，必须有layout，这样的元素只有可读属性haslayout，值为true。

IE团队建议实现透明的方法有很多，以便向下兼容和自身的私有属性，使IE上的元素透明。

1. -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
2. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
3. opacity: .5;

目前，实现简单最好的方法是：

1. filter:alpha(opacity=30);
2. opacity:.3;

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