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便可。

---

以为有帮助的小伙伴右上角点个赞~

扫描上方二维码关注个人订阅号~

以为有帮助的小伙伴点个赞支持一下~