如何使灰色覆盖覆盖所有站点，包括 post 图像和元数据

Question

当我的菜单打开时，我在正文中放置了一个灰色的覆盖层。但它不会影响 post 图片和一些元数据...

CSS

.is-menu-toggled-on body {
 box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);
 }

如何让叠加层覆盖一切...？

Answer 1

您可以像这样简单地制作一个叠加层。我正在向您展示一种常规的叠加技术。将其用于您的代码。

body {
  position: relative;
  height: 100vh;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  /*dim the background*/
}

<div class="overlay">hello</div>

如何使灰色覆盖覆盖所有站点，包括 post 图像和元数据

How to make grey overlay cover all site including post images and meta

css

overlay