说到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);
}
如果有更好的实现方式,欢迎大家留言,多交流。