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

新手上路,请多包涵

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

我想将两张图片叠加到另一张图片上,尽管有数十个关于此的教程,但我没有到达适用于我的案例。

我能够通过这些教程看到,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>

预先感谢您的帮助。

原文由 Millet Antoine 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 2.9k
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>

原文由 Nil Llisterri 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

 .img-container {
  position: relative;
}

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

这些图像现在应该彼此重叠。使用 z-index 属性,您还可以指定哪个在顶部。你给的值越高,元素就会出现得越高。

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

原文由 GMchris 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题