爲整個網站創建半透明覆蓋圖

我試圖在整個頁面上使用半透明PNG創建覆蓋圖。爲整個網站創建半透明覆蓋圖

由於某些原因，我的頁面中的某些元素仍然顯示爲全綵色，而這似乎只適用於背景？

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

2012-10-02 Francesca

這是因爲該元素的孩子' overlay'時，疊加層不應該有任何子元素，並確保您放置的z-index高於頁面中任何其他元素。 – Cyclonecode

你覆蓋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>

2012-10-02 21:01:28

謝謝，我已經完成了這個工作，它似乎正在工作，但是儘管有100％的高度，它並沒有擴大頁面的整個高度？更新了鏈接。 – Francesca

添加位置：固定爲#overlay，就像我上面的代碼。 :) –

添加{top：0;左：0}，如果在整個內容上有總包裝，則爲正確定位。 – BasTaller

回答