html - 匹配背景图像的高度以进行叠加

Question

我有一个背景图像，其顶部是一个覆盖层，我希望覆盖层能够响应地匹配背景图像的高度，我能管理的最多就是匹配该部分的高度，有什么想法吗？

html

<section class="section">
    <div class="bg-img">
        <div class="overlay">
            <p>This is a text on the overlay</p>
        </div>
    </div>
</section>

CSS

.section {
  width: 100%;
  height: auto;
  min-height: auto;
}

.bg-img {
  background: url('/static/img.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 80%;

}

.overlay {
  width: 600px;
  height: 100%;
  background-color: rgb(0,0,0,0.07);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

Answer 1

赋予内部 div 绝对定位并使父 div 相对定位。

.section {
  width: 100%;
  height: auto;
  min-height: auto;
}

.bg-img {
     background: url(https://placekitten.com/640/360);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 80%;
    min-height: 50vh;
    position: relative;
    width: 80%;
    background-size: cover;

}

.overlay {
height: 100%;
    background-color: rgb(179 42 42 / 65%);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: absolute;
    width: 100%;

}

<section class="section">
    <div class="bg-img">
        <div class="overlay">
            <p>This is a text on the overlay</p>
        </div>
    </div>
</section>