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

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>

我在每个 "container-fluid" 元素上使用了背景图片。

现在我需要第一个背景图像与第二个重叠 "container-fluid"。

然而，当我在两个上使用负边距时，例如（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> 元素之间重叠另一个背景图像

Get background image to overlap another background image between two <div> Elements

html

css

background-image

twitter-bootstrap