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