css - 如何将叠加层添加到背景图像

<分区>

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

如这张图片所示，我看到的大多数网站在图像上都有这种 mask ，然后在该 mask 上有文字。

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

我在网站的页眉部分使用 Bootstrap Jumbotron，具有 container-fluid 属性，高度设置为 100vh。我使用图像作为超大屏幕的背景图像。这真的是很常见的事情，在很多网站上都能看到。例如:

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

附言我是 css 的新手，我今天才开始了解这些掩码和叠加层属性。

最佳答案

尝试使用线性渐变:

背景图像:线性渐变(rgba(0, 0, 0, 0.5)，rgba(0, 0, 0, 0.5))，url(“../some-image.jpg”) ;

关于css - 如何将叠加层添加到背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55041953/