Question

我正在尝试使用包含2个背景图像的Bootstrap Jumbotron。总体思路如附图所示。在底层是全宽度照片（以灰色表示），并且在其顶部是透明的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图层并使用负边距将其向上推以覆盖jumbotron。但是当我这样做时，jumbotron中的标语不再被突出显示/选中。看起来好像顶部透明的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;，以便您仍然可以选择其下方的文字。

祝你好运。

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

1 个答案: