網站的全屏覆蓋

Question

所以我想覆蓋整個頁面的覆蓋（紅色），並在所有的頂部。我還希望可以點擊它，並在其下面有元素，就好像疊加層不在那裏一樣。

Answer 1

.overlay{ 
 
    position:absolute; 
 
    background:#000; 
 
    opacity:.3; 
 
    left:0; 
 
    right:0; 
 
    top:0; 
 
    bottom:0; 
 
    z-index:1 
 
}

<div class="overlay"> 
 

 
</div> 
 
<div> 
 
    You will be able to see the content. But cant click it 
 
</div>

請確保.overlay附加直接孩子到body標籤

Answer 2

DEMO：

http://plnkr.co/edit/86XkHcz8G5Z7vCMJh5gs?p=preview

使用的覆蓋分度位置：絕對屬性來覆蓋整個頁面。

使用pointer-events: none;使覆蓋點擊可點擊。

HTML

<div class="overlay"> 
</div> 
<div> 
    You can click through the overlay. Try clicking here <a href="http://google.com" target="_blank">Visit Google</a> 
</div> 

CSS：

body { 
    position:relative; 
    height: 2000px; 
} 
.overlay{ 
    position:absolute; 
    background:red; 
    opacity:.5; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    z-index:1; 
    pointer-events: none; // This will allow you to click through overlay 
}