CSS實現DIV層背景透明而文字不透明

在我們設計制作一些網頁的時候可能會用到半透明的效果，首先我們可能會想到用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做一下處理。