设置背景后的部分与上一个重叠 [英] section after background set up overlapping the previous one

问题描述

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

One section overlaps the other one. Are there any solutions?

这是第一部分:

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

推荐答案

您可以尝试以下方法吗:

Can you try this:

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

这篇关于设置背景后的部分与上一个重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！