CSS如何使背景透明以及文字不透明的執行個體

在我們設計製作一些網頁的時候可能會用到半透明的效果，首先我們可能會想到用PNG圖片處理，當然這是一個不錯的辦法，唯一的相容性問題就是ie6 下的BUG，但這也不困難，加上一段js處理就行了。但假如我們需要一個半透明遮罩的彈出層，如登陸框、註冊框、提示等，這時可能需要整個頁面都要被半透 明的遮罩層覆蓋，那麼如用背景平鋪的話，此時此刻也許就不是一個好辦法了，圖片大了會影響載入速度，圖片小了同樣會增加頁面的渲染計算量，那麼這時也許就 需要用CSS濾鏡了。

假如有這樣一個例子：“有一個DIV塊，此DIV是黑色半透明的，但此DIV裡面的內容要保持原狀，不能透明”，那麼我們該怎麼做呢？

假如HTML部分我們這樣寫的

<div class="touMingDiv">      <div>          <h1>這是透明的層這是透明的層這是透明的層這是透明的層              這是透明的層這是透明的層這是透明的層這是透明的層這是透明的層          </h1>      </div>      <p>          這是透明的層,但上邊的文字和圖片均不透明，相容ie7,ie8,ie9,ie10,FF,Chrome      </p>      <img src="bg.jpg"/>  </div>

對於CSS我們也許就這樣寫了

.touMingDiv{      filter:Alpha(opacity=60);      opacity:0.6;  }

但經過測試我們發現，不僅div容器半透明了，連div裡面的文字和圖片都把透明了。由於這些濾鏡的屬性已經繼承給了子項目，所以會出現這種效果。

我們可以用下面這種發法來實現

.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，所以有了這幾句代碼:

background:#000 9;/*CSS Hack,只能對ie9以下瀏覽器ie6,ie7,ie8有效，否側ie10,FF,Cherome會失去透明效果*/  filter:Alpha(opacity=60);/*只對ie7,ie8有效*/

另外還要對子級元素設定relative或者absolute屬性，這樣才能出現背景透明而背景上面的文字和圖片正常顯示的效果。

但這裡的代碼毅然不適合ie6，建議對於ie6就用png圖片吧，然後用js做一下處理。