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>