Html 图像覆盖图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1074914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html Image over image
提问by Adrian Pirvulescu
Can anyone tell me how can I add an image over another image without using Z-indexor Z-order?
谁能告诉我如何在不使用Z-index或的情况下在另一个图像上添加图像Z-order？
回答by roryf
Difficult to answer properly without knowing exactly what you want to achieve, z-index probably isn't what you actually need. For instance the following would work:
在不确切知道您想要实现的目标的情况下很难正确回答，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;
}
Also whether you use <img>tags or background-imagesdepends on the semantic valueof the images, i.e. are they presentational or actualy content of the page?
此外，您是否使用<img>标签或background-images取决于图像的语义值，即它们是页面的展示内容还是实际内容？
回答by Weegee
The easiest way is to make sure they're both the same size, one has transparency, and you use this snippet:
最简单的方法是确保它们的大小相同，一个具有透明度，然后使用以下代码段：
<img style="background:url(image.jpg)" src="overlay_image.gif" alt="" />
回答by Colin
Set the main image's background image in CSS with the background-imageproperty
使用background-image属性在 CSS 中设置主图像的背景图像
回答by sara
You can also use text over image by using the following code:
您还可以使用以下代码在图像上使用文本：
<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>
Hope that helps.
希望有帮助。
