css - 添加覆盖以覆盖网页的全部内容

Question

我想知道是否有办法创建一个黑色透明覆盖层来基本上覆盖网页的全部内容？

<body>
  <div class="main-container">
    <!--many more divs here to create webpage-->
  </div>
</body>

score 2 · Accepted Answer

在 div 上使用这个 css 来创建一个黑色透明覆盖：

#overlay {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    position: fixed;
    top:0;
    left: 0;
}

score 2 · Accepted Answer

可以使用绝对位置进行非常基本的覆盖：

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .6;
    background-color: #000;
}

UPD。正如 GSP 在评论中指出的那样，当窗口高度大于视口时，这不是最佳解决方案。在这种情况下{position: relative;}，也应该使用 body。

score 1 · Accepted Answer

1

这可能是您正在寻找的：http: //malsup.com/jquery/block/

于 2013-01-14T14:27:28.007 回答

3 回答 3