图像上的 Html 图像答案

【问题标题】：Html Image over image图像上的 Html 图像
【发布时间】：2010-11-07 16:14:29
【问题描述】：

谁能告诉我如何在不使用Z-index 或Z-order 的情况下将图像添加到另一个图像上？

【问题讨论】：

【解决方案1】：

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

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

希望对您有所帮助。

【讨论】：

非常“老派”的代码。不要使用它（HTML 电子邮件除外）。

【解决方案2】：

如果不确切知道您想要实现什么，就很难正确回答，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 取决于图像的语义值，即它们是页面的展示内容还是实际内容？

【讨论】：

我喜欢所有答案...但我接受了这个答案，因为它具有我想要的确切 css :)。谢谢大家！！！！！！！！！！！！！！！！！！
图片上没有alt属性的HTML无效。

【解决方案3】：

最简单的方法是确保它们的大小相同，一个具有透明度，并且您使用这个 sn-p：

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

【讨论】：

overlay_image 应该在 src 属性中，而不是背景规则中。不出所料，背景规则将决定背景...

【解决方案4】：

在 CSS 中使用 background-image 属性设置主图像的背景图像

【讨论】：

这可能是更快的方法，但您也可以将其中一张图片绝对放置在另一张图片之上。
@Dan：是的，如果你使用背景位置，虽然你的覆盖图像需要有足够的透明空间围绕它，以使底层图像可见。