DIV CSS 佈局教程網

透明往往能產生不錯的網頁視覺效果下面是兼容主流浏覽器的CSS透明代碼。

1. transparent_class {   
2.   
3.   filter:alpha(opacity=50);   
4.   
5.   -moz-opacity:0.5;   
6.   
7.   -khtml-opacity: 0.5;   
8.   
9.   opacity: 0.5;   
10.   
11. }  

filter:alpha(opacity=50):這個是為IE6設的，可取值在0-100，其它三個0到1.

-moz-opacity:0.5; 這個是為了支持一些老版本的Mozilla浏覽器。

-khtml-opacity: 0.5; 這個為了支持一些老版本的Safari浏覽器。

opacity: 0.5; 這是最重要的，因為它是CSS標准.該屬性支持firefox, Safari和 Opera.

CSS透明度繼承問題

如lady.qq.com的效果圖

但CSS的透明屬性涉及到一個繼承問題，當為父級元素設置透明度後，子元素將自動繼承其透明度

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

對於子元素是文字的情況

三種解決方法.

1。如果能夠將就看,就先暫時不管了

2。為文本子元素指定一個相對更深的顏色。也就是說，當子元素繼承透明度後，所得到的文本顏色正好就是你想要的。 
  前提是，這個顏色還有加深的可能，和需要詳細的計算顏色和透明度的值。

3。為透明效果和文字單獨設置各個層,也就是為透明單獨做個層.然後文字的層蓋在上面

以上就是小編為大家帶來的兼容主流浏覽器的CSS透明代碼(必看篇)全部內容了，希望大家多多支持~