背景设置后的部分与上一个重叠答案

【问题标题】：section after background set up overlapping the previous one背景设置后的部分与上一个重叠
【发布时间】：2018-10-10 17:54:45
【问题描述】：

一个部分与另一个部分重叠。有什么解决办法吗？

这是第一部分：

<div class="background"> 
<div class = "row"> 
<div class="background-curtain"></div>
    <image source="picture.jpeg"> 
</div> 
</div> 


.background{ 
    position: relative;
}
.background-curtain{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, black, white);opacity: 0.3;
    z-index: -100;
}

这是另一个：

<section>
    <div class="background-some"></div>
</section>

.background-some{
    background: url(image.jpeg);
    height: 60%;
    width: 100%;
}

【问题讨论】：

这里看不到任何重叠的东西。我使用您的代码创建了这支笔，您发现这里有什么重叠？ codepen.io/SubSul/pen/LgWzVw

标签： html css bootstrap-4

【解决方案1】：

你能试试这个吗：

<section>
    <div class="background"> 
        <div class = "row"> 
            <div class="background-curtain"></div>
            <img src="picture.jpeg"> 
        </div>
    </div> 
</section>
<section>
    <div class="background-some"></div>
</section>

CSS：

.background{ 
        position: relative;
        overflow: hidden;
    }
    .background-curtain{
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to top, black, white);opacity: 0.3;
        z-index: -100;
    }
    .background-some{
        background: url(background.jpeg);
        height: 60%;
        width: 100%;
    }

【讨论】：