Question

＆＃13;

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

＆＃13;

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

＆＃13;

我在此部分添加了黑色叠加层，但不知道原因，但它影响了所有带有行元素的标题文本。我可以通过制作bg-overlay的子节点来解决它。但在这样做时，最小高度不起作用。我想保留最小高度也使标题文本具有正常颜色。

Answer 1

请添加此CSS。

.container {
    position: relative;
    z-index: 100;
}

Answer 2

您希望u'\x00\x004\x00\x08\x00\x00\x00The Delta Wavelength (nm) is currently set to 0.008.\xfc\xa9\xf1\xd2Mb\x80?'后面有bg-overlay吗？如果是，您必须在container课程中应用一些CSS。在container类中添加以下css。

container

Answer 3

在.single-package-item .package-cost而不是bottom:0使用top:0，如下所示：

 .single-package-item .package-cost {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #F9676B;
        padding: 5px 20px 5px 20px;
        font-weight: 800;
    }

这里的完整代码：

	.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;
			vertical-align: top;
		}
		
		.single-package-item .image-section img {
			width: 100%;
			vertical-align: top;
		}
		
		.single-package-item .package-cost {
			position: absolute;
			left: 0;
			top: 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;
			position: absolute;
			right: 0;
			left: 0;
			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>

Css背景叠加影响标题文本

3 个答案: