css透明度的一些兼容测试
前言
网站丢给了外包公司来弄，但是老外写css的时候似乎没有考虑到国内的浏览器市场，于是只用了opacity这个属性来写，当IE8-的浏览器访问的时候，浮动层就像一块大黑斑药膏贴在哪里。很显然，婀娜多姿的模特被黑色药膏挡住了，用户完全感觉不到药膏下的她是有多么秀色可餐，因此也没有点击“性趣”去点击这条新闻了。所以必须来修改，让婀娜多姿的图片有种朦胧美。
我们希望起码IE7+的效果都是这样
这只狗有点丑，它在微博上求助各路PS大神，请它玩坏
代码进行时
HTML代码如下：
-
css代码如下
.item li {
position: relative; width: 240px; height: 180px;
}
.item li p {
background-color:#000;
opacity: .8;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
position: absolute;
bottom:0;
left:0;
}
貌似我们都习惯用了opacity这个属性来写透明度，所以当我们这么写的时候以为是对的，但其实IE8-的效果如下：
于是找到了相关opacity的资料，国内的w3c对其解释：设置元素的不透明级别，但是国外的w3c对其的解释：CSS Image Opacity / Transparency，这个属性主要是针对图片来设置的透明度，而很少对于某一个元素整体进行不透明度的处理。对此，w3c对其的解释是：应用此属性的子孩子不会继承该属性值，但是其会影响到整个元素所处的区域透明度，包括它的内容。因此此处用opacity显然是不明确的。
或许你可以拿手机出来扫扫
或者点击→：opacity透明度的测试[IE9+]
既然用opacity不可取，那么我们要用到IE私有属性，filter，在前几天 关于fliter文章我们有提到了这个属性，就是只有IE才可以认的，其他都是不认的。那么我们把代码改改
.item li p {
background-color: rgba(0, 0, 0, 0.8); /*此属性为css不透明度，兼容IE9+ chrome等高级浏览器*/
background-color:#000; /*IE6~IE8识别背景色*/
filter:Alpha(opacity=80); /*IE6~IE8*/
color: #fff; position: absolute; bottom:0; left:0;
}
貌似这算是结尾了，但是问题可能还没有这么简单。
用IE9和IE8访问站点的时候发现了两个内容展示的效果不太一样，IE9的表现得却稍微不正常，相对比较更加透明，如图
左边是IE9，右侧是IE8
为什么会出现的这种情况，是跟alpha有冲突，因此我们可以用条件注释，IE9以下启用另一套模式，代码可以稍微加加
.item li p {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
position: absolute;
bottom:0;
left:0;
}
可以用你手头上的IE89来检测一下→：条件注释alpha
刚刚还没有设置span为relative的时候在IE7~9观察，alpha都是被从p上继承下来
因此必须给其相对定位，让其不继承包含块的属性，但是这样IE7-的浏览器依然还是继承alpha的值， 百撕不得骑姐呀~~~
但是这种又有一个弊端，就是多写条件注释，这样每次都要重写一遍，于是，又有了另外一种相对比较好一些的IE hack叫做 选择器前缀法，其实就是媒体查询类似写自适应的时候代码，如下：
@media screen\9{...}/*只对IE6/7生效 */
@media screen {...}/*只对IE8有效 */
@media screen\,screen\9{...}/*只对IE6/7/8有效 */
@media screen {...} /*只对IE8/9/10有效 */
@media screen and (min-width:0){...} /*只对IE9/10有效*/
那么，刚刚的代码其实还可以这么缩短
@media screen\,screen\9 {
.item p{
background-color:#000;
filter:Alpha(opacity=60);
}
.item p span{
position: relative;
}
}
请用IE9-浏览器来观看此demo：择器前缀法：背景透明，文字不透明
后话
其实上面的代码还可以用负值的margin-top:xx 来构造，不过还是没有不懂是否还可以兼容IE6~7；2. filter:Alpha在IE6居然是认不出来了，不懂是不是我IE tester的原因，还是本身就是，但是微软却说是支持的，所以无解；3.假如你不是一个纠结完美的诠释设计稿的同学，那就不必要纠结用hack来写，比较这东西能少用就少用，最好是不用；4,.IE的不透明度设置不仅仅局限于alpha还有其他的，比如滤镜，或许也是一个不错的选择呢。
完结~