CSS背景半透明效果

说到CSS的透明效果可以使用如下方式：

1. opacity属性设置：例如opacity:0.7，而低版本的IE浏览器不直接支持这个属性，但是可以使用滤镜filter:alpha(opacity:70)来达到效果。         

例如：.box{width:100px;height:100px;background:#000;opacity:.7;*filter{opacity:70}}

如果使用此方式，有个副作用，半透明效果子类标签里面的文字也会受到影响，一样有透明效果，因为有继承关系。

       2.使用 background:rgba(0,0,0,.7)，低版本ie则使用滤镜filter的渐变效果，2者都不会继承.

.box{

width:100px;

height:100px;

background:rgba(0,0,0,.7);

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#CC000000, endcolorstr=#CC000000);

}

但是IE9对这2个属性都支持，所以效果会重叠。可使用一个HACK方式解决。

:root.box{

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000, endcolorstr=#00000000);

}

使用一些其他HACK好像效果无用(例如\9  ，无奈中，有知道的朋友可以留言噢。)

这样文字就不会有透明效果了。如果这个层加了绝对定位，低版本的IE又坑爹了，居然会穿透层。

那么就得加上这么一句background: url(about:blank) transparent\9; 记得加在background:rgba()上面。因为IE10也会识别\9这个hack。如果放在下方IE10背景就没了。

所以最后的代码：

.box{

width:100px;

height:100px;

background: url(about:blank) transparent\9; 

background:rgba(0,0,0,.7);

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#CC000000, endcolorstr=#CC000000);

}

:root .box{

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#00000000, endcolorstr=#00000000);

}

如果有更好的实现方式，欢迎大家留言，多交流。