Html 为什么div背景不透明？

我有一个index.html，它有一个视频背景、一个threejs模型和四个角的链接。现在，我想使用以下示例添加lightbox gallery页面： 我可以获得正确的位置，但gallery/row div背景是不透明的，而不是透明的。我希望它是透明的，这样用户可以看到背景。请注意，如果我将

移动到.html文件中gallery div的上方，则尽管z索引更高，但视频会模糊图像；我有种感觉可能与这个问题有关。。我做错了什么

如果我将其缩减为一张图像，则问题很容易通过屏幕截图看到：

html、正文、.overlay、.container、#视频{
宽度：100%；
身高：100%；
}
身体{
保证金：0；
溢出：隐藏；
}
.集装箱{
位置：静态；
}
#录像带{
位置：绝对位置；
z指数：0；
对象匹配：填充；
}
.覆盖{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}
.右上角{
右：0；
排名：0；
}
.右下角{
右：0；
底部：0；
}
.左上角{
左：0；
排名：0；
}
.左下{
左：0；
底部：0；
}
.链接文本{
z指数：3；
位置：绝对位置；
颜色：白色；
字体系列：'Helvetica'；
字体大小：粗体；
利润率：20px；
字体大小：较大；
}
.画廊{
z指数：4；
位置：静态；
}
/**灯箱标记**/
.灯箱{
/**默认灯箱为隐藏*/
显示：无；
/**位置与风格*/
位置：固定；
z指数：999；
宽度：100%；
身高：100%；
文本对齐：居中；
排名：0；
左：0；
背景：rgba（0,0,0,0.8）；
}
.灯箱img{
/**填充灯箱图像*/
最大宽度：90%；
最高高度：80%；
利润率最高：2%；
}
.灯箱：目标{
/**删除默认浏览器轮廓*/
大纲：无；
/**取消隐藏灯箱**/
显示：块；
}

kc
左下角

我想出来了。我必须将gallery

位置设置为
相对位置。显然
static
元素忽略了
z-index