全屏叠加css / jquery

Question

我正在尝试制作一个“巨大”的div，用不透明度0.4填充所有视口。问题是如何做到这一点。我尝试使用我的所有页面内容创建一个div并为其提供此属性：

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

因为那不起作用，我试图添加z-index并设置一个高值，但它也没有用。 任何的想法？ 我想做这样的事情：

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/

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