用CSS/jQuery创建全屏覆盖的叠加层

Question

我正在尝试创建一个“巨大”的 div，它填充整个视口，并具有0.4或其他透明度。问题是如何实现。我尝试创建一个包含所有页面内容的 div 并赋予其以下属性：

.div{
  width:100%;
  height:100%;
  background:#000;
  opacity:0.5;
}

自从那个方法不起作用后，我尝试添加z-index并设置一个高值，但仍然没有起作用。有什么想法吗？我想做出这样的效果：

- nick

Answer 1

我认为你在寻找类似于这样的东西：

CSS：

#fade-wrapper {
    display: none;
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.5);
}

这里有一个示例: http://jsfiddle.net/hTQb8/1/

- Justin

---

只要你的JS/jQuery正确，并且将.div CSS设置为我在#fade-wrapper上面的样式，它应该可以正常工作。也许你可以一并发布你的JS/jQuery代码？ - Justin

此外，请确保在尝试查看更改时进行硬刷新，因为浏览器可能会显示缓存的网站版本。 - Justin

我可以:D稍作修改，谢谢，真的！ - nick

可能需要在IE8或更低版本中使用高度100％和宽度100％。 - Frank

如果您将此内容放置在类似地图的东西上面，还需要确保它具有相当高的z-index。请勿忘记。 - Frank

Answer 2

试试这个

HTML

<div class="div_out">
  <div class="div_in">the content in this div will be placed above the overlay</div>
</div>

CSS

.div_out{
width:100%;
height:100%;
background:#000;
opacity:0.5;
position:fixed;//you forgot from this point
top:-22px;
left:-22px;
margin-top:22px;
margin-left:22px;
}
.div_in{
 width:90%;
 height:90%;
 margin:0 auto;     
 margin-top:1.5%;
 background color:white;
 }

- Dev Man