CSS透明屬性詳解
阿新 • • 發佈:2019-02-19
透明往往能產生不錯的網頁視覺效果,先奉上相容主流瀏覽器的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定位,實現覆蓋。