具有不同高度的多个背景图像

Question

我想要一个包含 2 个背景图像的 Bootstrap 超大屏幕。总体思路如附图所示。底层是一张全宽照片（以灰色表示），在它上面是一个透明的 PNG（以黄色表示）。 Jumbotron 的高度设置为 350px，适用于全角照片。话虽如此，我希望顶层超过 350px，以便它与 Jumbotron 下方 div 中的文本重叠。您建议我如何实现这一目标？

Example

我有一些 HTML 标记如下：

<body>
<section class="jumbotron">
    <h1>Tag line in a Bootstrap Jumbotron</h1>
</section>

<section>
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet,...</p>
</section>
</body>

我有以下 CSS:

.jumbotron {
     background-image: url("top.png"), url("bottom.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-position: 50% 0%;
     height: 350px;
}

使用这些代码，我能够正确堆叠 2 个背景图像，以便透明顶层很好地位于底层之上。但是，我不知道如何让顶层超出 350px，以便它可以与下面的文本重叠。

任何建议将不胜感激。谢谢！

* 更新 * 所以我试图回答我自己的问题。我取得了一些进展，但解决方案似乎并不完整。这是我所做的...

我添加了一个额外的 div 以仅保留顶部透明 PNG 层并使用负边距将其向上推以覆盖超大屏幕。但是当我这样做时，超大屏幕中的标语不能再是 highlighted/selected。看起来好像顶部透明 PNG 层正在覆盖它。我试过玩 z-index 但这没有帮助。这是我更新的 HTML:

<body>
<section class="jumbotron">
    <h1>Tag line in a Bootstrap Jumbotron</h1>
</section>

<section class="container-fluid">
    <div class="row">
        <div class="png-layer"></div>
    </div>
    <div class="content row">
        <div>
           <h2>Title</h2>
           <p>Lorem ipsum dolor sit amet,...</p>
        </div>
    </div>
</section>
</body>

已更新CSS：

.jumbotron {
     background-image: url("bottom.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-position: 50% 0%;
     height: 350px;
}
.png-layer {
     background-image: url("top.png");
     height: 500px;
     margin-top: -350px;
}
.content {
     margin-top: -200px;
}

关于如何微调解决方案以使其完美的任何想法？谢谢！

Answer 1

最好的方法是（在我看来，正如您在问题更新中正确指出的那样）创建一个 div 专门保存您想要覆盖在 Jumbotron 之上的 .png 和文本。 该元素的CSS应该包括：

z-index:xxxx; 其中 xxxx 是允许您的 div 显示在您打算用作背景的图像之上的任何值（即高于它包含 div) 但低于您希望它出现在下面的文本。还要记住 z-index 仅适用于您定义了 position 属性的元素。
pointer-events: none; 这样您仍然可以 select 它下面的文字。

祝你好运。

具有不同高度的多个背景图像

Multiple background images with different heights

html

css

background-image

twitter-bootstrap-3