1、首先子元素会继承父元素的透明度:
设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。
2、其次子元素的透明度是基于父元素的透明度计算的:
设置父元素opacity:0.5,即使设置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基础上设置的,因此子元素的opacity还是0.5。
解决方案:
这样设置父元素的opacity,会影响子元素的透明度
opacity:0.6;background: #F5F5F5
用background:rgba为背景 透明度前三个值为颜色rgb 最后一个值表示透明度和opacity用法一致,这样设置不会对子元素产生影响。
background: rgba(245,245,245,0.5);