【发布时间】：2018-05-24 06:19:40
【问题描述】：
.bg-overlay{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.4);
z-index:0;
}
#popular-packages{
position: relative;
min-height:900px;
background: url('../../photos/bg/pack-bg.jpg');
color:white;
}
#popular-packages .heading{
padding-top:15vh;
}
#popular-packages .heading h2{
font-family: sans-serif;
font-weight: 800;
font-size:40px;
z-index:2;
}
#popular-packages .heading h4{
font-size:20px;
line-height: 36px;
}
.single-package-item .image-section{
position: relative;
}
.single-package-item .image-section img{
width:100%;
}
.single-package-item .package-cost{
position: absolute;
left:0;
bottom:0;
background-color: #F9676B;
padding:5px 20px 5px 20px;
font-weight: 800;
}
.single-package-item h5{
font-family:sans-serif;
font-weight: 700;
margin-top:25px;
}
.single-package-item p{
font-size:15px;
}
.single-package-item .read-more{
color:#f9676b;
text-transform: uppercase;
}
.single-package-item .read-more .fa-arrow-right{
font-size:12px;
transition: 0.5s;
position: relative;
top:-2px;
}
.single-package-item .read-more:hover .fa-arrow-right{
margin-left:10px;
}
.more-package{
background-color: #f9676b;
width:200px;
padding:10px 0px 10px 0px;
margin:auto;
cursor: pointer;
transition:0.5s;
} <section id="popular-packages">
<div class="bg-overlay"></div>
<div class="container">
<div class="heading text-center mb-5">
<h2>POPULAR PACKAGES</h2>
<h4>TRAVEL EXPRESS PROVIDE</h4>
</div>
<div class="row">
<div class="col-md-4">
<div class="single-package-item">
<div class="image-section">
<img src="photos/package/pack-1.jpg" alt="">
<div class="package-cost">$3000</div>
</div>
<h5>AMERICA- 5 Days, 4 Nights</h5>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by
</p>
<div class="read-more">
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-package-item">
<div class="image-section">
<img src="photos/package/pack-2.jpg" alt="">
<div class="package-cost">$4000</div>
</div>
<h5>Thailand- 4 Days, 3 Nights</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet modi
inventore voluptatum molestiae assumenda
</p>
<div class="read-more">
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-package-item">
<div class="image-section">
<img src="photos/package/pack-3.jpg" alt="">
<div class="package-cost">$4000</div>
</div>
<h5>Thailand- 4 Days, 3 Nights</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet modi
inventore voluptatum molestiae assumenda
</p>
<div class="read-more">
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
</div>
<div class="more-package btn-hover-white text-center my-5">
MORE PACKAGE
</div>
</div>
</section>我在这个部分添加了一个黑色覆盖，不知道为什么，但它影响了所有离开行元素的标题文本。我可以通过将所有内容都设为 bg-overlay 的子 div 来解决它。但是这样做 min-height 是行不通的。我想保留最小高度也使标题文本具有正常颜色。
【问题讨论】：