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

我有两个分层的div；一个在前面（z索引：1），一个在后面（z索引：-1）。我希望前面的DIV有一个“背景色：透明”，后面的DIV有一个“背景色：灰色”

---

问题是透明颜色只显示灰色（我想这是预期的），因此两个div显示为一种颜色。有没有办法让一个内部DIV有一个透明的颜色，然后在它周围有一个较大的DIV，在没有重叠的地方有一个不同的背景颜色？

也许你想要这样的东西：

正文{
背景：url(https://lorempixel.com/g/1000/800/)中心/盖；
}
.集装箱{
利润率：50像素；
填充：20px；
--c：线性梯度（红色、红色）；
背景图像：var（--c），var（--c），var（--c），var（--c）；
背景尺寸：30px 100%，100%30px；
背景位置：左、上、右、下；
背景重复：无重复；
位置：相对位置；
颜色：#fff；
}
.覆盖{
位置：绝对位置；
内容：“；
顶部：30px；
左：30px；
右：30px；
底部：30px；
背景：rgba（0255,0,0.5）；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。mollis nisi Vivamus vitae mollis nisi。毛里斯前庭ac腔隙ac外翻。他是一个多洛人，也是一个多洛人。Vivamus eleifend nisl nulla，一种佩伦特式的同侧阴茎。不含酒精的葡萄酒。努克麦格纳酒店

因此，第二个问题的答案是选择第一个示例并将底部div调大，不是吗。。。你能详细说明你想要什么吗？不管底部的DIV有多大，顶部的DIV仍然会显示它的背景色，因为它是透明的。我的意思是你把底部放大，然后从顶部移除透明的背景。。。你能画点东西解释一下吗？