DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS透明屬性詳解
CSS透明屬性詳解
編輯:CSS詳解     

透明往往能產生不錯的網頁視覺效果,常用於遮罩層,圖片半透明,透明漸變,頂欄,圖文配標題等等,兼容主流浏覽器的CSS有幾種不同的寫法,常用的有四種。

如下代碼:

.mask-layer {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-kHtml-opacity:0.5;
opacity:0.5;
}

上面的幾個屬性分別是:

 

opacity: 0.5; 這是最重要的,因為它是CSS標准.該屬性支持Firefox, Safari和 Opera.
filter:alpha(opacity=50); 這個是為IE6設的,可取值在0-100,其它三個0到1.
-moz-opacity:0.5; 這個是為了支持一些老版本的Mozilla浏覽器。
-kHtml-opacity: 0.5; 這個為了支持一些老版本的Safari浏覽器。

CSS透明度繼承問題
但CSS的透明屬性涉及到一個繼承問題,當為父級元素設置透明度後,子元素將自動繼承其透明度,比如本站的一個效果:

20140411111512

即使你又為子元素指定透明度為1也是無效的。

對於子元素是文字的情況,我的解決方法一般是如果多少還能夠看清,就不管。另一個折衷的方法是,為文本子元素指定一個相對更深的顏色。也就是說,當子元素繼承透明度後,所得到的文本顏色正好就是你想要的。前提是,這個顏色還有加深的可能,和需要詳細的計算顏色和透明度的值。

還有一種方法就是,透明層獨立出來,如下代碼,先.mod設置position:relative;然後.mask-layer設置position:absolute;z-index:1;最後.title設置position:absolute;z-index:2;

<div class=”mod”>
<img src=”images/20140411111512.png” alt=”” />
<p class=”mask-layer”></p>
<p class=”title”>小清新,你喜歡嗎</p>
</div>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved