CSS中的两个背景图像部分重叠答案

【问题标题】：Partial overlap two background images in CSSCSS中的两个背景图像部分重叠
【发布时间】：2018-04-25 20:59:16
【问题描述】：

我试图在 CSS 中重叠两个图像：第一个是主菜单的“背景”图像，第二个是首页的“封面”。问题是第一个是透明的 png，它需要显示在封面上方（现在，它不会超出 div 容器）。

现在结果是这样的：

但第一张图片，#menu .container-fluid 下的图片是这样的：

当前代码：

HTML

<section>
    <div id="menu">
        <div class="container-fluid">
            <!-- Content of menu -->
        </div>
    </div>
    <div id="portada">
        <figure class="proporcion-fija-indice"></figure>
    </div>
</section>

CSS

.proporcion-fija-indice {
  display: block;
  margin: 0;
  padding-top: 48.30%; /* 2026px/4194px = 0.4830 */
  background-image: url('../img/portada.jpg');
  background-size: cover;
  background-position: center center;
}

#menu .container-fluid {
  background-image: url('../img/header.png');
  min-height: 125px;
}

关于如何达到预期结果的任何想法？

【问题讨论】：

您应该为此使用z-index。因此，为必须高于具有较高 z-index 的项目的项目提供较低的 z-index。
@SupremeDEV z-index 似乎不起作用。
请注意，z-index 仅适用于定位元素。所以position: absolute/relative/etc。以下是一些示例：w3schools.com/cssref/pr_pos_z-index.asp
好的。我也尝试过在元素和 z-index 中使用 position:relative，第一个元素中的值较高，然后向后。但什么都没有改变。
那么完美。祝你的项目好运。我还为您准备了一个示例，说明如何使其与定位一起工作:)

标签： html css twitter-bootstrap image

【解决方案1】：

您是否尝试过让标题更高，并在 proporcion-fija-indice 上设置一个负的 margin-top？

.proporcion-fija-indice {
  display: block;
  margin: 0;
  padding-top: 48.30%; /* 2026px/4194px = 0.4830 */
  background-image: url('../img/portada.jpg');
  background-size: cover;
  background-position: center center;
  margin-top:-50px;
}

#menu .container-fluid {
  background-image: url('../img/header.png');
  min-height: 150px;
}

【讨论】：

是的，我刚刚对此进行了讨论，这就是解决方案。在这种情况下，我添加了margin-top: -100px，因为这解决了问题。谢谢！

【解决方案2】：

你可以使用 z-index

#menu .container-fluid {
  background-image: url('../img/header.png');
  min-height: 125px;
  z-index:1;
}

另一种方法是在#menu 中使用绝对位置...这可能需要一些调整..

【讨论】：

z-index 似乎对这两个元素都不起作用，无论是正值还是负值。 #menu 上的 position: absolute 会破坏一切，甚至是响应能力，所以这是不行的。

【解决方案3】：

这是一个如何使它工作的例子：

#menu {
        background-image: url("https://i.stack.imgur.com/zRInk.png");
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
        background-repeat: no-repeat
}
#portada {
        background-image: url("https://cdn-images-1.medium.com/max/1500/1*d2MAPp7120q_8x6Ue8KYmQ.png");
        width: 100%;
        height: 100%;
        z-index: -2;
        position: absolute;
        top: 0px;
        left: 0px;
        background-repeat: no-repeat
}

<section>
    <div id="menu">
        <div class="container-fluid">
        </div>
    </div>
    <div id="portada">
        <figure class="proporcion-fija-indice"></figure>
    </div>
</section>

【讨论】：

非常好的例子！
@Juank 很高兴能帮到你:)