css继承样式

<!-- 新增弹框start -->
	<div class="pos-f" style="width:100%;height:100%;top:0;left:0;opacity: 0.5;  background-color:#000;">
		<div class="bg-e pos-a h" style="width:200px;height:200px;top:50%;left:50%;margin:-100px 0 0 -100px;background-color: aliceblue">
			<img src="../images/1.png">
		</div>
	</div>
	<!-- 新增弹框end -->

上述代码写一个弹框的样式，效果如下：

• 如果设置父元素背景透明度为opacity:0.5,那么子div设置背景色,也会是透明的，如图：

• 如何解决这个问题呢？将将父盒子的背景设为background: rgba(0,0,0,0.5)

<div class="pos-f" style="width:100%;height:100%;top:0;left:0;background: rgba(0,0,0,0.5)">
		<div class="bg-e pos-a h" style="width:200px;height:200px;top:50%;left:50%;margin:-100px 0 0 -100px;">
			<img src="../images/1.png">
		</div>

	</div>