如何在背景图片上添加叠加

Question

我当然是Web设计的新手。

如图所示，我看到的大多数网站在图像上都有这种遮罩，然后在该遮罩上有文本。

所以，如果我不以这种方式编辑图片并想在其上添加蒙版，该如何实现？

我将Bootstrap Jumbotron用于网站的标题部分，具有容器流体属性，其高度设置为100vh。 我将图像用作超大屏幕的背景图像。这确实很常见，可以在许多网站上看到。例如：

因此，如何为背景图像添加遮罩或覆盖层（肯定是黑色），以便使白色文本可见。

P.S。 我对CSS非常陌生，今天我才了解这些遮罩和覆盖属性。

Answer 1

您可以将两个块嵌套在一起，一个与背景图像嵌套，另一个与叠加层：

.background{
  width: 500px;
  height: 500px;
  background: url('https://static1.squarespace.com/static/56be46d2a3360cae707270a0/t/5772ef9b20099e38818859b0/1467150245253/');
  background-size: cover;
}

.overlay{
  width: 500px;
  height: 500px;
  background-color: rgba(0, 0, 0, 0.5);
}

<div class="background">
  <div class="overlay">
    <!-- Content here -->
  </div>
</div>

可以使用rgba()函数的最后一个参数来修改覆盖层的不透明度。

Answer 2

尝试使用线性渐变：

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../some-image.jpg");

有关更多信息，请检查以下链接：https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient