css在背景图片上加蒙版

要在CSS背景图片上添加蒙版，可以使用`::before`或`::after`伪元素来创建一个覆盖在背景图片上的半透明层。以下是一个简单的示例：

HTML代码：

<div class="background">
  <h1>Hello, World!</h1>
</div>

CSS代码：

.background {
  position: relative;
  background-image: url('your-image-url');
  background-size: cover;
  width: 100%;
  height: 100vh;
}

.background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
}

在这个示例中，我们首先将`div`元素的`position`属性设置为`relative`，以便能够在其内部创建绝对定位的伪元素。然后，我们设置背景图片的URL和尺寸，并将容器的宽度和高度设置为`100%`和`100vh`，以使其填满整个屏幕。

接下来，我们使用`::before`伪元素来创建一个半透明的层覆盖在背景图片上。我们将其`content`属性设置为空字符串，以确保它是一个空元素。我们设置其`position`属性为`absolute`，以便它可以在容器内部绝对定位。然后，我们将其`top`、`left`、`width`和`height`属性都设置为`100%`，以使其完全覆盖背景图片。最后，我们将其`background-color`属性设置为半透明的黑色，以创建蒙版效果。

您可以根据需要调整半透明层的颜色和不透明度，以实现所需的效果。