Html 创建一个覆盖整个屏幕的黑色半透明div

我想创建一个如下所示的半透明背景，而不是白色div，只有半透明背景。我试过了，但不起作用。这就是我试过的

.container---弹出窗口{
背景：rgba（0,0,0,0.5）；
边框：0px非透明；
溢出：隐藏；
边际：0px；
填充：0px；
-webkit点击突出显示颜色：透明；
位置：固定；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
过渡：不透明度0.3s到0.0s；
能见度：可见；
边界：没有！重要；
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
-o-用户选择：无；
z指数：2147483647；
}

白色弹出窗口的

z-index

应大于

弹出窗口背景的
z-index

白色弹出窗口的
z-index
应该比
的
z-index
大。弹出窗口背景
我能想到的最简单的方法就是在弹出窗口后面有一个背景，如下所示：



然后，您可以将该div的背景更改为半透明黑色。
我能想到的最简单的方法是在弹出窗口后面有一个背景，如下所示：



然后，您可以将该div的背景更改为半透明的黑色。
这里是您的操作方法，顺便说一句；你可以用很多方法来做


正文{
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
高度：100vh；
位置：相对位置；
}
.层{
背景：rgba（0,0,0,0.5）；
溢出：隐藏；
边际：0px；
填充：0px；
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
z指数：1
}

顺便说一句，这里是你如何做到的；你可以用很多方法来做


正文{
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：100%；
高度：100vh；
位置：相对位置；
}
.层{
背景：rgba（0,0,0,0.5）；
溢出：隐藏；
边际：0px；
填充：0px；
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
z指数：1
}

这些通常被称为模态对话框，您所拥有的似乎是正确的，因此可能您的html/正文不够大……您什么也看不到吗？试着不要过渡和可见性，以防万一……你所做的一切都是正确的。只需在页面中添加一些内容，如文本或图像，它就会显示在半透明遮罩后面。@PranetDixit做到了这一点，并且成功了，感谢您的贡献，发生的事情是，我在一个单独的页面上进行测试，没有任何内容，因此我无法区分它们之间的区别。这些通常称为模态对话框，您的对话框似乎是正确的，因此可能您的html/正文不够大..，您什么也看不到吗？试着不要过渡和可见性，以防万一……你所做的一切都是正确的。只需在页面中添加一些内容，如文本或图像，它就会显示在半透明遮罩后面。@PranetDixit这样做了，并且成功了，感谢您的贡献，发生的事情是我在一个单独的页面上进行测试，后面没有任何内容，所以我无法分辨区别。
.popup-background {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5000;
}