时间戳

首页 > 解决方案 > 背景设置后的部分与上一个重叠

html - 背景设置后的部分与上一个重叠

问题描述

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

这是第一部分：

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

标签： htmlcssbootstrap-4

解决方案

你可以试试这个：

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

推荐阅读