为整个站点创建半透明覆盖

【问题标题】：Creating a semitransparent overlay for the entire site为整个站点创建半透明覆盖
【发布时间】：2012-09-23 18:28:47
【问题描述】：

我尝试在整个页面上创建一个带有半透明 PNG 的叠加层。

由于某种原因，我页面中的某些元素仍然显示为全彩，而这似乎只是将自身应用于背景？

#overlay{
background-image:url(../images/overlay.png);
width:100%;
height:100%;
margin:0px;
position:absolute;
z-index: 20;
}

【问题讨论】：

【解决方案1】：

您的叠加 div 包括所有应该成为“低于”该 div 的 div。您应该使用以下 css 创建一个单独的 div 以将其用作叠加层：

#overlay {
background-image: url(../images/overlay.png);
width: 100%;
height: 100%;
margin: 0px;
position: fixed;
z-index: 20;
}

这样，这基本上就是你的 html：

<body>
   <div id='wrapper'>
   </div>  
   <div id='footerwrapper'> 
   </div>
   <div id='overlay'>
   </div>
</body>

【讨论】：