CSS中不透明度繼承問題的處理

標籤：style   blog   http   color   ar   使用   sp   strong   div   

關於CSS中不透明度的設定，除了相容方面的問題，還有不透明度繼承問題，這裡只討論下後者。

那麼，

什麼時候會發生不透明度繼承問題？

當文檔結構中有父子嵌套關係的時候，並且父元素有不透明度屬性設定時，會發生不透明度繼承問題，此時子項目也繼承了父元素的不透明度，並且再另外設定子項目不透明度是無效的（如果父元素沒有設定不透明度，子項目的設定是有效）。

下面是相關代碼和：

CSS部分：

#parent{    height:400px;    width:500px;    background:green;    opacity:0.3;    filter:alpha(opacity=30);/*相容IE5.5 IE7 IE8，在IETester下測試IE6並不支援*/    -moz-opacity:0.3;/*一些老版本Mozzila*/    -khtml-opacity:0.3;/*一些老版本Safari*/}#child{    height:100px;    width:100px;    background:red;}

DOM結構部分：

<div id="parent">    <div id="child"></div></div>

：
圖一　　　　　　　　    圖二

圖一為設定不透明度後的效果，圖二為沒設定透明度的效果，可以看到，子項目child也具有了一定的透明度。

在實際應用中，我們有時希望的去是讓底層看起來有透明效果，而讓上層的元素仍為不透明。

那麼，

該怎麼解決？

1、使用具有透明效果的圖片來代替background效果。

2、將父子項目的嵌套關係改為兄弟關係，並用絕對位置及z-index來實現。

如果還有其他方法的話，積極留言喲~

CSS中不透明度繼承問題的處理