另一个背景前面的透明背景

Question

我有两个分层的DIV;一个在前面(z-index：1(，一个在后面(z-index：-1(。我希望前面的 DIV 具有"背景色：透明"，而后面的 DIV 具有"背景色：灰色"。

问题是透明颜色只显示灰色(我想这是意料之中的(，所以两个 DIV 都显示为一种颜色。有没有办法让一个具有透明颜色的内部 DIV，然后在它周围有一个更大的 DIV，在没有重叠的地方具有不同的背景颜色？

Answer 1

也许你想要这样的东西：

body {
 background:url(https://lorempixel.com/g/1000/800/) center/cover;
}
.container {
  margin:50px;
  padding:20px;
  --c:linear-gradient(red,red);
  background-image:var(--c),var(--c),var(--c),var(--c);
  background-size:30px 100%,100% 30px;
  background-position:left, top,right,bottom;
  background-repeat:no-repeat;
  position:relative;
  color:#fff;
}
.overlay {
  position:absolute;
  content:"";
  top:30px;
  left:30px;
  right:30px;
  bottom:30px;
  background:rgba(0,255,0,0.5);
}

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae mollis nisi. Mauris vestibulum ac lacus ac vulputate. Maecenas molestie ex dolor, et aliquet augue varius sit amet. Vivamus eleifend nisl nulla, a pellentesque ipsum pharetra eget. Curabitur tincidunt non nibh vitae convallis. Nunc magna 
<div class="overlay"></div>
</div>