半透明的蒙版效果从一年多以前就开始流行,到现在已经是大家非常熟悉的效果了。用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再这么搞下去,市场份额必然会越来越小。