在我們設計製作一些網頁的時候可能會用到半透明的效果，首先我們可能會想到用png處理，當然這是乙個不錯的辦法，唯一的相容性問題就是ie6下的bug，但這也不困難，加上一段js處理就行了。但假如我們需要乙個半透明遮罩的彈出層，如登陸框、註冊框、提示等，這時可能需要整個頁面都要被半透明的遮罩層覆蓋，那麼如用背景平鋪的話，此時此刻也許就不是乙個好辦法了，大了會影響載入速度，小了同樣會增加頁面的渲染計算量，那麼這時也許就需要用css濾鏡了。
假如有這樣乙個例子：「有乙個div塊，此div是黑色半透明的，但此div裡面的內容要保持原狀，不能透明」，那麼我們該怎麼做呢？
假如html部分我們這樣寫的12
3456
78910
11<divclass="toumingdiv">
<div>
<h1>這是透明的層這是透明的層這是透明的層這是透明的層
這是透明的層這是透明的層這是透明的層這是透明的層這是透明的層
<p>
這是透明的層,但上邊的文字和均不透明，相容ie7,ie8,ie9,ie10,ff,chrome
對於css我們也許就這樣寫了12
34.toumingdiv
但經過測試我們發現，不僅div容器半透明了，連div裡面的文字和都把透明了。由於這些濾鏡的屬性已經繼承給了子元素，所以會出現這種效果。
我們可以用下面這種發法來實現12
3456
78910
1112
1314
15.toumingdiv
.toumingdiv p,
.toumingdiv div,
.toumingdiv img
注意，上面background:rgba(0,0,0,0.6);只對ie9，ie10，ff，chrome...等有效，不包括ie6，ie7，ie8，所以有了這幾句**:12
background:#0009;/*css hack,只能對ie9以下瀏覽器ie6,ie7,ie8有效，否側ie10,ff,cherome會失去透明效果*/
filter:alpha(opacity=60);/*只對ie7,ie8有效*/
另外還要對子級元素設定relative或者absolute屬性，這樣才能出現背景透明而背景上面的文字和正常顯示的效果。
但這裡的**毅然不適合ie6，建議對於ie6就用png吧，然後用js做一下處理
白色橡樹分享方法：
css背景透明
css實現背景透明而文字不透明 平時我們所說的調整透明度，其實就是在樣式中調整不透明度，而實現透明的css方法通常有如下3中方式 css3的opacity x。x的取值為0到1，如opacity 0.5表示不透明度為50 css3的rgba red,green,blue,alpha alpha的取值...
怎麼實現背景透明而文字不被透明
前言 我們知道使用opacity可以實現透明效果，相容語句是 filter alpha opacity 0 100 但是它具有父子繼承特性，怎麼實現我們想要的效果呢？方法一 運用css3的屬性rgba r,g,b,a ie8以上的版本可以達到我們的要求 r 紅色值。正整數 百分數 g 綠色值。正整數...
div css實現背景透明
重點內容入口 ie6和部分ie7核心的瀏覽器會讀懂rgba ie專屬濾鏡 filter alpha的相容處理 背景透明，文字不透明全相容方案 測試瀏覽器 virtie6 虛擬機器下xp的ie6 純正ie8 純正ie8下qq瀏覽器 win7下的ie 9.0.32 win8下的ie 10.0.21 ch...