CSS實現父元素半透明，子元素不透明

CSS實現父元素半透明，子元素不透明。 很久以來大家都習慣使用opacity:0.5在新式瀏覽器里實現半透明，而對IE較舊的版本使用filter:Alpha(opacity=0.5)的濾鏡來實現半透明。但是這樣實現的半透明有個問題，那就是這個屬性會被子元素所繼承。

如下代碼，則子元素中也將是半透明效果，無論你將子元素的半透明值重置還是如何都不會改變這一情況。

.parent{opacity:0.5; background-color:#fff;}
.child{opacity:1.0; background-color:#fff; height:200px;}

HTML:

<div class="parent">
    <div class="child">哈哈哈</div>
</div>

其實在新的CSS3規則里面的屬性 GRBA已經可以方便的實現父元素透明，而子元素不透明了。 如下代碼

<div class="parent" style="background:rgba(255,255,255,0.5)">
    <div class="child" style="height:200px; background-color:red">哈哈哈</div>
</div>

但是對於IE6~8方面就無法兼容了，可以適當的降級。 如果一定要兼容的話只能考慮使用絕對定位的，看上去是包含關系的兩個層，其實是兄弟關系，使用JS來控制其位置的呈現，這種具體就不再陳述了，網上解決方案很多。