html - 如何在整个页面上创建一个深色半透明封面？

Question

有没有办法在整个网页的顶部创建一个 50% 不透明的黑色 div？

我可以通过在脚本顶部放置一个固定位置的 div 来做到这一点，宽度和高度为 100%，z-index 为 1。但是，通过固定它，我不能在前面放置一个 div(那个不暗)可以滚动。

我尝试在 CSS 中执行以下操作:

#dark_cover{

    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #000;
    position: relative;

    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.5);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

但是，大部分页面并没有变暗(即使我设置了 z-index:100)，它仍然只是原始视口(viewport)的大小，当你向下滚动时，你可以看到它没有扩展到页面底部(尽管 div 从页面顶部开始，直到底部才关闭，因此页面中的所有内容都应包含在其中)。

有办法吗？

更新:

dark_cover div 应该位于页面上所有其他内容的顶部。想象一下，您使用一个已经存在的页面，并且在该页面的顶部有一个半透明的深色 div，就像您放置在整个页面上的有色玻璃。然后你有一个额外的 div，上面有一些次要内容。

当我将 z-index 设置为 10 时，它应该位于页面上其他所有内容之上，对吗？ (假设没有其他东西有 z 索引)但事实并非如此。它仅位于几个背景 div 之上，而不是其余部分。

我尝试做 position:absolute 使左、上、右、下全为 0。但是，它仍然只跨越原始视口(viewport)，而不是在滚动时。

Answer 1

固定位置应该可以完成这项工作，然后使用适当的 z-index 为您的叠加层使用绝对或相对。

.overlay {
    background-color: #ffffff;
    position: absolute;
    z-index: 15;
}

Here's a fiddle基于你所拥有的:

body {
  margin: 0;
}
.overlay {
  background-color: #ffffff;
  position: absolute;
  padding: 10px;
  z-index: 15;
  width: 60%;
  left: 20%;
  top: 40px;
  /*Height is for example to make overlay scroll*/
  height: 200vh;
}
#dark_cover {
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #000;
  position: fixed;
  /* RGBa with 0.6 opacity */
  background: rgba(0, 0, 0, 0.5);
  /* For IE 5.5 - 7*/
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  /* For IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

<div id="dark_cover"></div>
<div class="overlay">
  <p>This is the overlay</p>
</div>
This is content