背景半透明CSS兼容设置

 半透明的蒙版效果从一年多之前就开始流行，到如今已是你们很是熟悉的效果了。用CSS也能够很是简单的实现各类浏览器的兼容设置。咱们先看下半透明蒙版的效果。

没有盖蒙板的图片：

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

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

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

具体代码：
html：

<div class="top">
这个是上面的蒙版层
</div>
<div class="back">
这个是下面的层
</div>

css：

.back {height:400px;background:url(../p_w_picpaths/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不能半透明等等;

IE再这么搞下去，市场份额必然会愈来愈小。