logo标签列表

如何使用HTML-CSS将两张图片叠加在一起？

htmlcssimagez-index
9
我搜索了几个小时，但没有找到解决我的问题的方法。
我想把两张图片叠加在一起，尽管有很多教程，但我无法将其应用到我的情况中。
通过这些教程，我能够看到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>

感谢您的帮助。
3个回答
9

如果您想将一张图片覆盖在另一张图片上面，只需将第二张图片设置为绝对定位，并使用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>

9

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

.img-container {
  position: relative;
}

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

图片现在应该是相互叠放的。使用 z-index 属性，您还可以指定哪一个在最上面。赋予更高的值，元素将出现得更高。
由于您的容器是相对定位的，它所拥有的所有绝对定位子元素都将相对于它而非整个页面进行定位。
4

您需要首先创建一个容器元素来包含您的图片。例如，可以使用 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定位和继承），因为这将在以后非常重要。

谢谢您的回复，它完美地解决了问题，同时也感谢您的建议。 - Millet Antoine
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接