opacity兼容性以及存在问题处理

　　opacity兼容性

　　　　opacity属性是CSS3的属性，用于设置元素的不透明级别。语法： opacity: value | inherit; ①值value表示规定不透明度，从0.0（完全透明）到1.0（完全不透明）。 ②值inherit表示应该从父元素继承opacity属性的值。

　　　　注意： IE以及更早的版本支持替代的filter属性：例如 filter: Alpha(opacity = 50)。

　　　　在铺"酷狗音乐"官网时，每个歌单和榜单的区域，当鼠标浮在区域上时，需要有灰色的遮罩层效果。

　　　　鼠标没有浮在区域时：鼠标浮在区域时：

　　　　鼠标浮在区域时，产生这遮罩层效果，并且有一个播放的图标。我当时使用的遮罩层代码：

1 .mask {
2     background-color: rgb(0, 0, 0);
3     opacity: 0.4;
4     filter: alpha(opacity = 30);
5     *zoom: 1;
6 }

　　　　亲测是可以兼容IE7-9的。但毕竟没有真正在上线的网站中使用过。所有我特意留意了这个问题。在后面有遇到类似的效果，就查看别人的代码是如何写的。下面是我从不同网站获取的关于透明度问题的兼容性代码：

/* 凡客网中遮罩层效果 */
.mask {
    background: #000;
    filter: alpha(opacity = 40);
    opacity: 0.4;
    -moz-opacity: 0.4;
}
/* 熊猫TV中遮罩层效果 */
.mask {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    filter: alpha(opacity = 40);
    opacity: .4;
}

　　　　以上代码亲测都只是兼容IE7-9的。目前我还没有遇到可以兼容IE6的，有大神可以做到的，给我指点一二。

　　存在问题

　　　　其实说起来，这个应该不算问题，是这个属性本身的特点吧。但是在项目中如果遇到问题不知道怎么回事的话，就会感觉莫名其妙的。所以就顺便提提这个问题。

　　　　我举的例子W3CSchool的CSS图像透明度中的实例3-透明框中的文本。

　　　　我直接将实例3的代码复制黏贴，为了突出我要说明的内容，我将opacity = 60 改为 opacity = 20，将 filter: 60; 改为 filter: 20; 在网站打开是这样的：

然后这三句注释掉:

/*background-color: #ffffff;*/
 /* for IE */
 /*filter:alpha(opacity=0.2);*/
 /* CSS3 standard */
 /*opacity:0.2*/

　　　　添加这句： background-color: rgba(255, 255, 255, 0.2); 效果图：

　　　　仔细看，我们发现后第二张图的文字是清晰的，而第一张图的文字也是模糊的，透明度很低。这个就是opacity属性的问题。因为CSS3中的opacity透明度属性具有继承性，opacity会把所有的元素都变透明，不仅仅是背景颜色,当某个对象设置了opacity透明度时，其子元素也会有透明度效果。特别注意下：如果父元素定义了opacity，那么子元素在定义一个opacity，那么子元素的效果其实是两者的乘积…例如，父元素的opacity:0.5，子元素opacity:0.2，那么子元素实际的opacity=0.5x0.2=0.1这个大家可以自己尝试下就知道了。

　　　　那么如何在项目中只需要背景是透明的，而不需要文字是透明的，那么要怎么做呢?

　　　　方法一：使用上面提到的rgba()方法，可以很直接的设置对象的透明度效果,不存在子元素也变透明的问题。但是IE7，8不支持此属性。

　　　　方法二：将透明层独立出来，父元素relative,子元素absolute,靠层叠样式分层。

 1 //  .background 只需加上 positon: relative;
 2 // .transbox的改动如下
 3 div.transbox {
 4     width: 338px;
 5     height: 204px;
 6     background-color: #fff;
 7     border: 1px solid black;
 8     filter: alpha(opacity = 20);
 9     opacity: 0.2;
10     position: absolute;
11     left: 50%;
12     top: 50%;
13     margin-left: -169px;
14     margin-top: -102px
15 }
16 // p元素变化如下
17 div.background > p {
18     position: absolute;
19     margin: 30px 40px;
20 }

　　　　效果如图：

　　　　这种方式其实还是蛮重要的，后面我做的项目只要涉及到有遮罩层这类效果的，做法都是这么做的。我个人感觉这样做是挺好的，而且我看了各种网站关于遮罩层这效果的样式大概也都是这么写的。