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定位，實現覆蓋。