首頁 >web前端 >css教學 >CSS透明屬性詳解(程式碼)

CSS透明屬性詳解(程式碼)

WBOY
WBOY原創
2016-05-16 12:03:502963瀏覽

本文介紹一下關於css透明屬性詳解及背景透明繼承解決辦法hack,如果你在使用css透明背景之類的此文章可幫你解決許多不相容問題

透明往往能產生不錯的網頁視覺效果,先奉上相容主流瀏覽器的css透明代碼:

代碼如下:

.transparent_class {
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的透明屬性涉及到一個繼承問題,當為父級元素設定透明度後,子元素將自動繼承其透明度,即使你又為子元素指定透明度為1也是無效的。

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

還有"取消透明度繼承」的說法,這個說法是不太準確的,據我個人所知,沒有任何取消透明度繼承的方法。只能說,當想要實現"多個元素覆蓋,只讓指定的元素透明」時,可以使用的一些hack。

搜了一下,找到一個不錯的實現這種效果的方法 – 一個關於透明繼承度的問題,有興趣的朋友可以看看。原理很簡單,添加一個空元素作為透明層,和不想透明但是要實現覆蓋效果的元素為同級元素。父級元素使用position:relative定位; 兩個子元素使用position:absolute定位,實現覆寫。

html代碼如下:

<p class="p3"><p class="p4"></p>这里文字图片都没透明度了 
<p class="p2">图片</p> 
</p>

css代碼如下:

body { 
background-image: url(./105247.png); 
background-repeat: repeat; 
} 
.p2{width:100px; height:100px; background: url(./testbok.png)} 
.p3{width:200px; height:200px; position:relative; margin-top:10px} 
.p4{position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}

如果你外面的容器高度是不定的,那麼只要把p3的高度設定的足夠的高度就可以了。
這個方法有個很不好的缺點:多了一個空白的p。

以上就是css透明屬性詳解(代碼)的詳細內容,更多請關注php中文網其它相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

相關文章

看更多