如何将叠加层添加到背景图像[重复]答案

【问题标题】：How to add overlay to background image [duplicate]如何将叠加层添加到背景图像[重复]
【发布时间】：2019-07-29 05:32:48
【问题描述】：

我当然是网页设计的新手。

如图所示，我看到的大多数网站都在图像上加上了这种蒙版，然后在蒙版上加上了文字。

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

我正在使用 Bootstrap Jumbotron 作为网站的标题部分，具有 container-fluid 属性，它的高度设置为 100vh。我使用图像作为 jumbotron 的背景图像。这真的是很常见的事情，可以在许多网站上看到。例如：

那么，如何在背景图像上添加蒙版或叠加层，当然是黑色，这样我就可以使白色文本可见。

附：我对 css 很陌生，今天我开始了解这些遮罩和叠加属性。

【问题讨论】：

您当然可以在这个问题上得到帮助，但您必须提供您的代码，以便我们可以为您指明正确的方向。

标签： css bootstrap-4

【解决方案1】：

尝试使用线性渐变：

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

【讨论】：

【解决方案2】：

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

.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()函数的最后一个参数来修改。

【讨论】：