解决方法
为什么不？当然可以,很简单：
>给你想要的元素一个非静态的位置;
>将小孩的z-index设置为-1;
>在主容器上创建堆栈上下文(通过设置它)
z-index,opacity,transforms或whatelse生成复合
层).
.container {
position: absolute;
z-index: 0; /* or eg. opacity: 0.99;*/
background-color: blue;
color: lightblue;
width: 100%;
height: 100%;
text-align: center;
}
.parent {
position: relative;
background-color: rgba(100,255,150,0.75);
color: green;
width: 50%;
height: 30%;
top: 30%;
left: 20%;
}
.child {
position: absolute;
z-index: -1;
background-color: orange;
color: yellow;
width: 100%;
height: 100%;
top: -50%;
left: 20%;
}
<div class="container">
<span>container</span>
<div class="parent">
<span>parent</span>
<div class="child">
<span>child</span>
</div>
</div>
</div>
(如果父级用作透明层,请务必使用background-image或rgba background-color：children继承父级的不透明度)
