为整个站点创建半透明叠加层

时间:2012-10-02 20:51:47

标签: css overlay opacity

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

出于某种原因,我页面中的某些元素仍然显示为全彩色,这似乎只适用于背景?

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

请参阅:www.rubytuesdaycreative.co.uk

1 个答案:

答案 0 :(得分:6)

您的重叠式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>