html - 如何将图像放在另一个图像之上

Question

我正在尝试在图像之上添加 Logo 。我试图重叠这两张图片，但它确实对我有用。 第二张图片被放置在第一张图片旁边。请帮我解决这个问题

这是我尝试使用 HTML 和 CSS 开发的网站。

HTML 文件:

<section id="home">
                <div class="backgroung" >
                    <img src="Images/banner1.jpg" style="width: 100%" class="bg">
                    <img src="Images/yellow.png" class="logo">               
                </div>
            </section>

CSS 文件:

#home{
    position: relative;
    top: 0;
    bottom: 0;
}
.bg {
    position: relative;
    top: 0;
    bottom: 0;
    z-index: 1;
}
.logo{
    position: absolute;
    top: 20px;
    bottom: 30px;
    height: 250px;
    width: auto;
    z-index: 2;
}

我预计这会相互重叠。 我希望这不是因为两张图片的文件类型不同。

Answer 1

您还应该设置 Logo 的 left 属性:

.background {
  display: inline-block;
  position: relative;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

<section id="home">
  <div class="background">
    <img src="https://picsum.photos/id/583/300/300" class="bg">
    <img src="https://picsum.photos/id/237/100/100" class="logo">
  </div>
</section>

您还可以使用多个背景图片:

.background {
  width: 300px;
  height: 300px;
  background:
    url(https://picsum.photos/id/237/100/100) no-repeat center, 
    url(https://picsum.photos/id/583/300/300);
}

<section id="home">
  <div class="background">

  </div>
</section>