css父元素透明度（opacity）對子元素的影響

首先子元素會繼承父元素的透明度：

• 設置父元素opacity：0.5，子元素不設置opacity，子元素會受到父元素opacity的影響，也會有0.5的透明度。

其次子元素的透明度是基於父元素的透明度計算的：

• 設置父元素opacity：0.5，即便設置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.5的基礎上設置的，所以子元素的opacity仍是0.5。

解決辦法：

利用CSS3屬性rgba（即red+green+blue+alpha的顏色），

例如background-color:rgba(0,0,0,0.5)

可是IE7/8不支持此屬性，可按以下方法寫：

父元素div要寫以下：

background-color: rgba(0,0,0,0.5)!important;

background-color: #000;

filter:Alpha(opacity=50);

子元素div加個定位position:absolute/relative便可。

---

以爲有幫助的小夥伴右上角點個贊~

掃描上方二維碼關注個人訂閱號~

以爲有幫助的小夥伴點個贊支持一下~