ウェブサイトの全画面オーバーレイ

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

位置でオーバーレイdiv要素を使用します：ページ全体をカバーする絶対的なプロパティ。

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 
}