css在背景图片上加蒙版，并且蒙版上面的字是白色的

可以使用CSS的伪元素(::before或::after)来实现背景图片上的蒙版，再利用CSS的颜色属性来设置字体为白色。

HTML代码：

<div class="bg-mask">
  <h1>Hello World</h1>
</div>

CSS代码：

.bg-mask {
  position: relative;
  background-image: url("background-image.jpg");
  background-size: cover;
  background-position: center;
}

.bg-mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置蒙版颜色 */
}

h1 {
  position: relative;
  color: #fff; /* 设置字体颜色为白色 */
  z-index: 1; /* 设置z轴顺序，使字体在蒙版上面 */
}

解释：

1. 首先，将div的position属性设置为relative，这是为了让其内部的伪元素::before相对于其进行定位。

2. 然后，设置背景图片的相关属性，如background-image、background-size和background-position。

3. 接着，使用伪元素::before来创建蒙版。设置其position属性为absolute，top、left、width和height分别为0、0、100%和100%，即完全覆盖div的背景图。

4. 在伪元素::before中设置背景颜色为rgba(0, 0, 0, 0.5)，这里使用rgba来设置颜色的透明度，从而形成蒙版效果。

5. 最后，在h1标签中设置其position属性为relative，color为#fff，即白色，z-index为1，这是为了将字体显示在蒙版上面。

通过以上代码，便可以在背景图片上添加蒙版，并设置蒙版上面的字体为白色。