在我們設計製作一些網頁的時候可能會用到半透明的效果，首先我們可能會想到用PNG圖片處理，當然這是一個不錯的辦法，唯一的兼容性問題就是ie6下的BUG，但這也不困難，加上一段js處理就行了。但假如我們需要一個半透明遮罩的彈出層，如登陸框、註冊框、提示等，這時可能需要整個頁面都要被半透明的遮罩層覆蓋，那麼如用背景平鋪的話，此時此刻也許就不是一個好辦法了，圖片大了會影響加載速度，圖片小了同樣會增加頁面的渲染計算量，那麼這時也許就需要用CSS濾鏡了。
假如有這樣一個例子：“有一個DIV塊，此DIV是黑色半透明的，但此DIV裏面的內容要保持原狀，不能透明”，那麼我們該怎麼做呢？
假如HTML部分我們這樣寫的
|
1
2
3
4
5
6
7
8
9
10
11
|
<div
class="touMingDiv"> <div> <h1>這是透明的層這是透明的層這是透明的層這是透明的層 這是透明的層這是透明的層這是透明的層這是透明的層這是透明的層 </h1> </div> <p> 這是透明的層,但上邊的文字和圖片均不透明，兼容ie7,ie8,ie9,ie10,FF,Chrome </p> <img
src="bg.jpg"/></div> |
對於CSS我們也許就這樣寫了
|
1
2
3
4
|
.touMingDiv{ filter:Alpha(opacity=60); opacity:0.6;} |
但經過測試我們發現，不僅div容器半透明瞭，連div裏面的文字和圖片都把透明瞭。由於這些濾鏡的屬性已經繼承給了子元素，所以會出現這種效果。
我們可以用下面這種發法來實現
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.touMingDiv{ width:800px; min-height:300px; color:#fff; background:rgba(0,0,0,0.6); background:#000
9;/*CSS
Hack,只能對ie9以下瀏覽器ie6,ie7,ie8有效，否側ie10,FF,Cherome會失去透明效果*/ filter:Alpha(opacity=60);/*只對ie7,ie8有效*/}.touMingDiv
p,.touMingDiv
div,.touMingDiv
img{ position:relative; /*或者是absolute，都可以使文字不透明，這樣做還是爲了 兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/} |
注意，上面background:rgba(0,0,0,0.6);只對ie9，ie10，FF，Chrome...等有效，不包括ie6，ie7，ie8，所以有了這幾句代碼:
|
1
2
|
background:#000
9;/*CSS
Hack,只能對ie9以下瀏覽器ie6,ie7,ie8有效，否側ie10,FF,Cherome會失去透明效果*/filter:Alpha(opacity=60);/*只對ie7,ie8有效*/ |
另外還要對子級元素設置relative或者absolute屬性，這樣才能出現背景透明而背景上面的文字和圖片正常顯示的效果。
但這裏的代碼毅然不適合ie6，建議對於ie6就用png圖片吧，然後用js做一下處理，可以參考我的另一篇文章
轉自：http://beyondweb.cn/article_detail.php?id=43