如何使用 HTML-CSS 将两张图片叠加到另一张图片上？

Question

我搜索了几个小时，但没有找到解决问题的方法。

我想将两张图片叠加到另一张图片上，尽管关于这方面的教程有数十种，但我还没来得及应用到我的案例中。

我能够通过这些教程看到，CSS 有一个属性 "z-index" 允许在背景图像中。我也可以看到绝对和相对位置属性但我不确定我的问题的解决方案是否与这些属性有关。

这是我想要解决问题的代码部分：

<img src='schema.png'>
<a href="#"><img src='Linkedin.png' width="30" height="30" ></a>
<a href="#"><img src='twitter.png' width="30" height="30"  ></a>

这是我的完整 html 代码：

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="menuStyle.css" />
    <title>Antoine</title>
 </head>
<body>
    <div id="bloc_page">
        <header>
            <div id="titre_principal">
                    <h1>Titre</span></h1>    
                    <h2>Sous titre</h2>
                    <br>
            </div>
        </header>
        <ul id="nav" style="clear:both;">
                <li><a href="#">menu 1 ?</a></li>
                <li><a href="#">menu 2</a></li>
                <li><a href="#">menu 3</a></li>
                <li><a href="#">menu 4</a></li>
        </ul>
            <img src='schema.png'>
            <a href="#"><img src='Linkedin.png' width="30" height="30" ></a>
            <a href="#"><img src='twitter.png' width="30" height="30"  ></a> 
        <ul id="footer">
            <br>
                <li><a href="#">Plan du site</a></li>
                <li><a href="#">Mentions légales</a></li>
                <li><a href="#">Nous contacter</a></li>
        <ul>
    </div>
</body>

提前感谢您的帮助。

Answer 1

其实这些属性正是您所需要的。下面是如何使用它们。假设您的图片有 class .overlay-img。将它们放入带有 class .img-container.

的容器中

.img-container {
  position: relative;
}

.overlay-img {
  position: absolute;
  top: 0;
  left: 0;
}

图像现在应该在彼此之上。使用 z-index 属性您还可以指定哪个在最上面。你给的值越高，元素就会出现的越高。

由于您的容器是相对定位的，因此它的所有绝对位置子项都将相对于它定位，而不是整个页面。

Answer 2

如果你想将一张图片叠加在另一张图片上，你只需要让第二张图片有一个绝对位置，并用 z-index 确定哪一张在上面，就像这样：

.top {
  position: absolute;
  left: 100px;
  top: 100px;
  border: 1px solid black;
  z-index: 1;
 }

<div>

<img src="http://placehold.it/150x150">
<img class="top" src="http://placehold.it/150x150">

</div>

Answer 3

您必须先创建一个包含图像的元素。例如，它可以是 div。

此元素需要 position: relative。使用 position: absolute 将您的图像放在那里并设置 top: 0; left:0.

接下来您必须指定 z-index 以在另一个之上显示一个。

所以基本上你会有这样的东西：

<div class="container">
  <img src='schema.png'>
  <img src='Linkedin.png' width="30" height="30" >
  <img src='twitter.png' width="30" height="30"  >
</div>

并在您的 css 例如：

.container{
  position: relative;
}
.container > img{
  position: absolute;
  top:0;
  left:0;
}
.container > img:first-child{
  z-index: 2;
}

您可能希望使用 width, height, overflow, display 等其他属性来获得您要查找的结果。

这在 HTML 中是很常见的事情，你应该确保你理解它的概念（css 定位和继承），因为这对以后非常重要。

如何使用 HTML-CSS 将两张图片叠加到另一张图片上？

How overlay two pictures to another using HTML-CSS?

html

css

image

z-index