css改變背景透明度

標籤：io   ar   os   使用   sp   on   問題   bs   代碼   

透明往往能產生不錯的網頁視覺效果，先奉上相容主流瀏覽器的CSS透明代碼:
.transparent{filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9;}

上面的幾個屬性分別是:

opacity: 0.9; 這是最重要的，因為它是CSS標準.該屬性支援firefox, Safari和 Opera。
filter:alpha(opacity=90); 這個是為IE6設的，可取值在0-100，其它三個0到1。
-moz-opacity:0.9; 這個是為了支援一些老版本的Mozilla瀏覽器。
-khtml-opacity: 0.9; 這個為了支援一些老版本的Safari瀏覽器。

CSS透明度繼承問題

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

使你又為子項目指定透明度為1也是無效的。

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

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

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

 

css改變背景透明度