div背景半透明 覆盖整个可视区域的遮罩层效果

下面是详细的攻略：

1. 基础实现方法

首先，我们可以用一个 <div> 元素来模拟遮罩层，并在其中添加一个半透明的背景。代码如下：

<div class="mask"></div>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5); /* 使用 rgba 设置半透明背景，最后的参数即为透明度，数值越小越透明 */
}
</style>

在这个代码中，我们通过设置 .mask 元素的 position 为 fixed，使其脱离文档流并且相对于浏览器窗口进行定位。然后，我们设置其 top、left、width、height 分别为 0、100%、100%，以达到遮盖整个可视区域的效果。最后，我们使用 rgba() 函数设置背景颜色为黑色半透明，透明度为 0.5。

2. 带有内容的遮罩层

有时候我们需要在遮罩层上添加内容，以便用户可以进行某些操作。比如一个模态框。那么，我们就需要在遮罩层上添加相应的内容，并将其 z-index 属性设置为比遮罩层更高的值，使其显示在遮罩层上方。代码如下：

<div class="mask">
  <div class="modal">
    <h2>我是模态框</h2>
    <p>这里是模态框内容</p>
  </div>
</div>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* 比遮罩层更高的 z-index */
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
</style>

在这个代码中，我们在遮罩层内部添加了一个模态框。模态框的样式通过 CSS 设置，我们使用了 position: absolute 把它相对于父级位置进行定位，并使用 transform 属性使其居中显示。由于我们希望模态框显示在遮罩层上方，因此设置其 z-index 为 2，而遮罩层的 z-index 则默认为 1。

为了让模态框看起来更美观，我们还添加了一些样式，比如白色的背景、圆角边框和阴影等。当然，这只是一个示例，你可以根据需要进行自定义。