背景半透明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再這麼搞下去，市場份額必然會愈來愈小。