如何在另一個圖像上顯示圖像

Question

我有兩個圖像一個較小，一個較大。

如何在另一個上顯示一個？

我的代碼：

<img src="big.jpeg" class="img" id="big"> 
<img src="small.jpeg" class="img" id="sml"> 

Answer 1

<div id="a1"> 
    <img src="http://i.stack.imgur.com/Pxx6V.jpg" id="a1"> 
    <img src="http://i.stack.imgur.com/kFxC6.jpg" id="a2"> 
</div> 

#a1 
{position:relative} 
#a2 
{position:absolute; top:25px; left:50px;} 

FIDDLE

Answer 2

使用position:absolute

div.images{ 
    border:solid green 4px; 
    height:120px; 
    width:120px;; 
    margin-top: 50px; 
    position:relative; 
} 
.images img{ 
    position:absolute; 
    top:0; 
    left:0 
} 

DEMO

Answer 3

你需要使用樣式絕對定位。將這兩個圖像放在一個div中，用作抵消圖像位置的容器。然後，爲每個圖像添加絕對定位，並使用left和top樣式屬性來定位它們。另外，爲每個圖像添加一個z-index樣式屬性。具有最高z-index屬性的圖像將置於頂部。

<div style="position: relative"> 
    <img src="big.jpeg" class="img" id="big" style="position: absolute; left: 0; top: 0; z-index: 0"/> 
    <img src="small.jpeg" class="img" id="sml" style="position: absolute; left: 0; top: 0; z-index: 1"/> 
</div>