不同高度的多幅背景图像
我试图有一个引导万宝龙，其中包含2个背景图像。总体思路如附图所示。底层是一张全宽的照片(用灰色表示)，上面是透明的PNG (黄色表示)。万宝琼的高度被设置为350 at，这是为全宽度的照片。话虽如此，我想在顶层超越350 is，所以它是重叠的文本在div下的Jumbotron。你建议我如何做到这一点？
示例
我有一些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幅背景图像，这样透明的顶层就可以很好地位于底层的顶部。但是，我不知道如何使顶层超出350 it，这样它就可以重叠下面的文本。
任何建议都将不胜感激。谢谢!
* UPDATE *，所以我尝试回答我自己的问题。我取得了一些进展，但解决办法似乎还不完整。我就是这么做的..。
我添加了一个额外的div，只保留顶部透明的PNG层，并使用负的边距将其向上推，以覆盖巨型加速器。但是当我这样做的时候，就不能再高亮显示/选择巨型电视里的标语了。似乎顶部透明的PNG层正在覆盖它。我试着玩z指数，但没什么用。下面是我更新的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;
}对如何微调到解决方案，使其达到完美有什么想法吗？谢谢!
回答 1
Stack Overflow用户
发布于 2016-01-13 21:43:22
最好的方法是(在我看来，正如您在更新您的问题中正确指出的那样)创建一个div，它专门保存您想要覆盖在Jumbotron和文本之上的.png。这个元素的CSS应该包括：
z-index:xxxx;中，xxxx是允许您的div显示在您打算用作背景的图像(即高于其包含的div)之上的任何值，但低于您希望它显示在下面的文本。还请记住，z-index只对您为其定义了position属性的元素起作用。pointer-events: none;，以便您仍然可以选择它下面的文本。
祝好运。
https://stackoverflow.com/questions/34755351
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号