Html图像在图像上

Question

有人可以告诉我如何在不使用Z-index或Z-order的情况下在其他图片上添加图片吗？

Answer 1

如果不确切知道自己想要实现什么，很难正确回答，z-index可能不是你真正需要的。例如，以下内容可行：

<div id="container">
    <img src="img1.jpg" id="img1" />
    <img src="img2.jpg" id="img2" />
</div>

#container {
    position:relative;
}

#img2 {
    position: absolute;
    left: 50px;
    top: 50px;
}

另外，您使用<img>标签还是background-images取决于图片的语义价值，即它们是页面的表现形式还是实际内容？

Answer 2

最简单的方法是确保它们的大小相同，一个具有透明度，并使用此代码段：

<img style="background:url(image.jpg)" src="overlay_image.gif" alt="" />

Answer 3

使用background-image属性

在CSS中设置主图像的背景图像

Answer 4

您还可以使用以下代码在图像上使用文字：

<TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
  <TR>
    <TD WIDTH="221" HEIGHT="300" BACKGROUND="samplepic.jpg" VALIGN="bottom">
      <FONT SIZE="+1" COLOR="yellow">Sample Text</FONT>
    </TD
  </TR>
</TABLE>

希望有所帮助。