html - HTMl，CSS-向我的div添加黑色覆盖

This question already has answers here:

Black transparent overlay on image hover with only CSS?
                                
                                    （8个答案）
                                
                        
                                15天前关闭。
            
                    
在我的项目中，我有一个div，并将其背景设置为图像。现在，我想向该图像添加深色覆盖。

我曾尝试在Web上实现其他解决方案，但是尝试时未成功。

这是我现有的代码：

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

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

}

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

最佳答案

绝对子代可用于填充整个父代，并为其提供所谓的叠加。

 .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>