在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

您可以使用z-index

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

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

Answer 2

您是否尝试过更高的标题，并在proporcion-fija-indice上设置负边距？

String fileName = "myImage.jpg";
        String imagePath = Environment.getExternalStorageDirectory() + "/" + fileName;

        File file = new File(imagePath);
        Uri imageUri = Uri.fromFile(file);

        Glide.with(this)
                .load(imageUri)
                        .into(imgView);

Answer 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>