如何在 html 中将一张图片插入到另一张图片之上？答案

【问题标题】：How to insert one image on top of another image in html?如何在 html 中将一张图片插入到另一张图片之上？
【发布时间】：2016-03-12 14:06:41
【问题描述】：

我有两张图片。我想在第一张图片上插入第二张图片。第一张图片大于第二张图片。所以我希望我的第一张图片完全覆盖 div 标签，第二张图片应该放在第一张图片的中心。我尝试了很多 css 代码，但都没有成功。

<%@ 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

我想把上面的图片放在中间。但是不知道怎么办？

【问题讨论】：

请在代码中为您的问题添加一个起点，另请参阅stackoverflow.com/help/mcve

标签： html css asp.net

【解决方案1】：

有多种方法可以做到这一点。这是我认为最简单的 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;
}

【讨论】：