HTMl，CSS - 向我的 div 添加黑色叠加层 [重复]

Question

在我的项目中，我有一个 div 并将其背景设置为图像。我现在想为这张图片添加一个深色叠加层。

我曾尝试在网络上实施其他解决方案，但尝试时没有成功。

这是我现有的代码：

<div class="bgDiv">
</div>

 .bgDiv {
    width: 100%;
    height: 88vh;
    position: relative;
    background: url("https://images.porffrrf.com/ededd/dedede444334ffr0") no-repeat center center/cover;

}

有人知道如何实现这个功能吗？谢谢。

Answer 1

您可以将线性渐变添加到背景属性：

 .bgDiv {
    width: 100%;
    height: 88vh;
    position: relative;
    background: linear-gradient(
          rgba(0, 0, 0, 0.5), 
          rgba(0, 0, 0, 0.5)
        ), url("https://www.esa.int/var/esa/storage/images/esa_multimedia/videos/2018/05/mars_sample_return/17493376-1-eng-GB/Mars_sample_return_pillars.jpg") no-repeat center center/cover;

}

<div class="bgDiv">
</div>

Answer 2

绝对子代可以用来填充整个父代，并给它一个所谓的叠加层。

 .bgDiv {
    width: 100%;
    height: 88vh;
    position: relative;
    background: url("https://images.unsplash.com/photo-1562887042-ed962a48feaa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80") no-repeat center center/cover;

}

.overlay{
  position: absolute;
  background-color: black;
  height: 100%;
  width: 100%;
  opacity: 0.5;
}

<div class="bgDiv">
<div class="overlay">

</div>
</div>