Html 匹配背景图像的高度以覆盖

发布于06月18日

我有一个背景图像，上面是一个覆盖图，我希望覆盖图与背景图像的高度相匹配，我能管理的最多的是匹配部分的高度，有什么 idea 吗？

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;
}

推荐答案

为内部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>