网站全屏覆盖

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

演示：

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

使用 position: absolute 属性的叠加层 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
}

网站全屏覆盖

Full screen overlay for website

html

css

overlay