背景半透明CSS兼容设置

半透明的蒙版效果从一年多以前就开始流行，到现在已经是大家非常熟悉的效果了。用CSS也可以非常简单的实现各种浏览器的兼容设置。我们先看下半透明蒙版的效果。

没有盖蒙板的图片：

我们加上半透明蒙板后的效果。

这个效果就是利用一个简单的半透明蒙板实现的，这里对于这个蒙版的透明度设置为：
filter:Alpha(Opacity=50);opacity:0.5;

（当然还要和背景色设置，以及position定位结合使用。）

具体代码：
html：

这个是上面的蒙版层

这个是下面的层

css：

.back {height:400px;background:url(../images/1.gif) 0 0 repeat-x; color:red;}
.top {height:400px;background-color:#fff;filter:Alpha(Opacity=60);position:absolute;opacity:0.6;top:0;left:0;z-index:10;}


以前的时候设计背景半透明还要一个-moz-opacity:0.5;但是现在不需要了。因为ff从3.0版本以后已经支持css3.0关于半透明的设置opacity:0.5;（1-0中间的数值）而IE还是不改自己牛哄哄的本性，作为浏览器老大还是摆出不与大家苟合的姿态，只支持自己的滤镜filter:Alpha(Opacity=50);（100-0中间的数值）

也怪不得前端开发人员无不痛恨IE，首先IE不能很好的支持CSS，跟其他浏览器不兼容。其次它有6.7.8三个版本（再往前还有5.5），不同版本对同一个页面也会有不同的解析。实在是可恨。再次，这三个版本的升级可谓是耗时又耗力，一般的用户不会等几个小时升级一个IE的版本。所以到现在还有很多的用户依旧在使用IE6。还有IE特别是IE6存在大量的可笑BUG，比如块属性标签float之后的margin-left和margin-right的bug，png不能半透明等等;