Question

我有以下HTML（Bootstrap）（真的很简单，但应该足够了）：

<div class="container-fluid" id="hero">
    <div class="container container-padding">
        <div class="row">
            <div class="col" align="center">

            </div>
        </div>
   </div>
</div>
<div class="container-fluid" id="spotlight">
    <div class="container container-padding">
        <div class="row">
            <div class="col" align="center">
                <img src="img/spotlight.png" />
            </div>
        </div>
    </div>
</div>

我在每个“容器流体”元素上使用背景图像。

现在我需要第一个背景图像重叠第二个“容器流体”。

然而，当我在两个例子上使用负边距时（margin-top：-50px或margin-bottom：-50px - 看起来总是第二个与第一个重叠。

我尝试了z-index，这对背景图像无效。我不能真正将第二个背景图像包含为实际图像，因为我想向该元素添加内容。

当使用负边距时，如何让第一个div重叠第二个？

非常感谢任何帮助，谢谢！

Answer 1

只需使用静态以外的位置，并通过z-index控制它们：

.container-fluid {
	position: relative;
	min-height: 50px;
}

#hero {
	background: url('https://via.placeholder.com/350x150/ff0000') no-repeat;
	background-size: cover;
	z-index: 10;
	top: 20px;
}

#spotlight {
	background: url('https://via.placeholder.com/250x250/00ff00') no-repeat;
	background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container-fluid" id="hero">
    <div class="container container-padding">
        <div class="row">
            <div class="col" align="center">

            </div>
        </div>
   </div>
</div>
<div class="container-fluid" id="spotlight">
    <div class="container container-padding">
        <div class="row">
            <div class="col" align="center">
                
            </div>
        </div>
    </div>
</div>

Playground

获取背景图像以重叠两个<div>元素之间的另一个背景图像

1 个答案: