调整视差上的叠加层大小时出现问题答案

【问题标题】：Issue when resizing overlay on Parallax调整视差上的叠加层大小时出现问题
【发布时间】：2020-07-18 06:29:01
【问题描述】：

我刚买了this template。将窗口大小调整为 991 像素以下时，由于填充 60 像素，叠加层不适合该部分。你知道我能做些什么来解决这个问题吗？

【问题讨论】：

请分享您的代码

【解决方案1】：

HTML

<div class="parallax-content">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="info">
                    <p>We design and develop <span>web apps</span> that delight your users and grow your business.</p>
                    <a class="btn-white-line" href="#">Contact Us</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.parallax {
min-height: 215px;
overflow: hidden;
position: relative;
padding-top: 60px;
padding-bottom: 60px;
}

.parallax:before {
content: '';
position: absolute;
width: 140%;
height: 140%;
opacity: .80;
background: #585CE9;
z-index: 2;
top: -20%;
left: -20%;
}

.parallax .parallax-content {
position: relative;
z-index: 3;
}

@media (max-width: 991px) {
    .parallax {
        padding-top: 60px;
        padding-bottom: 60px;
        min-height: auto;
    }
}

【讨论】：