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）并且它仍然只是原始视口的大小，当你向下滚动时你可以看到它没有延伸到页面的底部（尽管div从页面顶部开始，直到最底部才关闭，所以页面中的所有内容都应该包含在内部）。

有办法做到这一点吗？

更新：

dark_cover div应该位于页面上其他所有内容的顶部。想象一下，你拍摄一个已经存在的页面，在该页面的顶部有一个半透明的黑暗div，就像你放在整个页面上的有色玻璃一样。然后你有一个额外的div，在那个玻璃上面有一些小的内容。

当我把z-index设为10时，它应该在页面上的其他内容之上，对吗？（假设没有别的东西有z索引）但事实并非如此。它只在几个背景div之上，而不是其余的。

我尝试做位置：绝对使左，上，右，下全部为0.但是，它仅覆盖原始视口，而不是滚动时。

Answer 1

固定位置应该完成这项工作，然后使用绝对或相对的覆盖层使用适当的z-index。

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

Here's a fiddle根据您拥有的内容：

＆＃13;

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)";
}

＆＃13;

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

＆＃13;

Answer 2

问题已经解决了，但我想提供另一种技术 - 只是为了获得更多信息：

<小时/> 您可以使用：

z-index: -1;

现在你只需要订购每个需要在顶部的元素 - 结束，并且每个元素都在底部。它就像其他人一样，但具有固定的位置。

这似乎适用于一些最常见的浏览器（IE，Chrome，Mozilla）：

#dark_cover{
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;

  /* RGBa with 0.5 alpha*/
  background: rgba(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)";
}

Answer 3

Bootstrap模式现在滚动为主要内容，这是完美的。

你说他们的模态设计正是你想要的。你有没有想过使用Bootstrap？如果您只想要某些功能，请尝试查看自定义选项。

但是，我不建议定制。如果你包含他们的托管CSS和JS（不是自定义的），页面将加载更快，因为它从其他地方提取这些资源，你的用户可能已经缓存了这些文件。

如何在整个页面上创建一个黑色的半透明封面？

3 个答案: