Question

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

我想将两张图片叠加到另一张图片上，尽管有关于此的数十篇教程，但我还是不适用于我的案例。

我能够通过这些教程看到，CSS有一个允许在背景图像中的atribut“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

如果你想要将图像覆盖在另一个图像上，你只需要使第二个图像具有绝对位置，并且使用z-index确定哪个图像将位于顶部，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

实际上，这些属性正是您所需要的。以下是如何使用它们。假设您的图片有一个.overlay-img类。将它们放在类.img-container的容器中。

.img-container {
  position: relative;
}

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

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

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

Answer 3

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

此元素需要position: relative。使用position: absolute将图片放入其中并设置top: 0; left:0。

接下来，您必须指定z-index以显示另一个。{/ p>

所以基本上你会有类似的东西：

<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将两张图片叠加到另一张图片上？

3 个答案: