方案1.opacity默认子元素会继承;
一般不想要继承的情况下用rgba 的效果很好 background:rgba(0,0,0,.5) ;
存在问题: (1).iE7,8 不支持rgba
(2). 如果父元素采用的是渐变颜色 无法用 rgba
方案2. 抛弃子元素方法 ,采用定位模拟子元素 可解决 方案1中问题
<div class="container"> //position: relative
<div class="background"></div> //opacity: 0.5, width: 100%, height: 100%
<div class="children"></div> // position: absolute, width: 100%, height: 100%, top: 0, left: 0
</div>
原文:https://www.cnblogs.com/boyq/p/12093827.html