网站全屏叠加

Question

所以我想要一个覆盖整个页面的叠加层（红色），并且是最重要的。我也希望可以点击它，并在其下面的元素表现就像叠加层不在那里。

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

<div class="overlay">

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

＆＃13;

＆＃13;

＆＃13;

确保将.overlay作为直接子项附加到body代码

Answer 2

<强>样本：

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
}