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

Question

我想创建一个像下面这样的半透明背景，而不是白色的 div，只有半透明的背景。试过但它不起作用。这是我尝试过的。

.container---popup {
  background: rgba(0, 0, 0, 0.5);
  border: 0px none transparent;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  -webkit-tap-highlight-color: transparent;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease 0s;
  visibility: visible;
  border: none !important;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
  z-index: 2147483647;
}

<section class="container---popup">
</section>

标签： htmlcss

Answer 1

.popup-background {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5000;
}

z-index你的白色弹出窗口应该大于z-indexof .popup-background。