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="/static/imghwm/default1.png"  data-src="bg.jpg"  class="lazy"  / alt="CSS如何讓背景透明以及文字不透明的實例" >  
</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做一下處理。

以上是CSS如何讓背景透明以及文字不透明的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！