如何使用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將兩張圖片疊加到另一張圖片上？

回答

相關問題