html - 部分重叠CSS中的两个背景图像

Question

我试图在 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;
}

关于如何实现预期结果的任何想法？

Answer 1

您是否尝试过将 header 调高，并在 proporcion-fija-indice 上设置负边距顶部？

.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;
}