浅谈在不同浏览器下的透明问题 - Web前端

浏览器下透明的那些事，经常会遇到，先前有同事问我，一直没来总结下，今天总算有点时间归纳下。针对不同的浏览器，使用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;

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