如何在html中的另一張圖片上插入一張圖片？

-1

我有兩個圖像。我想在第一張圖片上插入第二張圖片。第1張圖像比第2張圖像大。所以我想讓我的第一張圖片完全覆蓋div標籤，第二張圖片應該放在第一張圖片的中央。我曾嘗試過很多CSS代碼，但沒有取得成功。如何在html中的另一張圖片上插入一張圖片？

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="A" %> 
 

 
<!DOCTYPE html> 
 

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <title></title> 
 

 
    <style type="text/css"> 
 

 
     .fishes { position: relative; top: 0; left: 0; } .fish { position: absolute; top: 60px; left: 80px; } 
 

 
    </style> 
 
    
 
</head> 
 
<body> 
 
    <form id="form1" runat="server"> 
 
    <div style="position: relative; left: 0; top: 0;"> 
 
     <center> <img src="cropped-longheaderbog1.jpg" class="fishes"/> 
 
      <img src="bannerfans_17362179.png" class="fish"/> </center> 
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

這裏是代碼的輸出：

output

我希望把上圖像中的中心。但不知道該怎麼辦？

來源

2016-03-09 stella

請在代碼的起點添加到您的問題，也http://stackoverflow.com/help/mcve見 – Roy

有多種方法可以做到這一點。這是我認爲最簡單的 https://jsfiddle.net/45gtzmho/

div { 
    width: 1280px; 
} 


img:first-of-type { 
    width: 800px; 
} 
img:last-of-type { 
    margin-left: -600px; 
    margin-top: 100px; 
    position: absolute; 
    z-index: 1; 
}

來源

2016-03-09 17:14:27 Shniper

如何在html中的另一張圖片上插入一張圖片？

回答

相關問題