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

我搜索了几个小时，我没有找到解决我的问题。如何使用HTML-CSS将两张图片叠加到另一张图片上？

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

我能够看到这些教程，CSS有一个amit“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>

预先感谢您您的帮助。

来源

2016-05-26 millet antoine

如果要叠加在一个又一个，你只需要做出第二个有一个绝对位置，并用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>

来源

2016-05-26 09:00:13

谢谢你完美的作品。 –

其实这些属性正是你所需要的。以下是如何使用它们。可以说你的图片有一个类.overlay-img。把它们放在类.img-container的容器中。

.img-container { 
    position: relative; 
} 

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

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

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

来源

2016-05-26 08:59:15 GMchris

您必须首先创建一个包含图像的元素。例如，它可以是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定位和继承），因为它对于以后很重要。

来源

2016-05-26 09:04:20 Charleshaa

谢谢您的回应，但完全符合您的建议。 –

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

回答

相关问题