时间戳

首页 > 解决方案 > 如何将图像放置在另一个图像之上

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

问题描述

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

这是针对我正在尝试使用 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;
}

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

标签： htmlcss

解决方案

您还应该设置 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>

推荐阅读