Html 如何在网站内叠加图像 (png)？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7289887/
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
How can I overlay images (png) within a website?
提问by Taylor
I am trying to mount an image in the middle of another (slightly larger) image so that it appears to be within the larger image (a phone in this case). I am unsure of the proper way to make this happen and any help is much appreciated!
我试图在另一个（稍大）图像的中间安装一个图像，以便它看起来在更大的图像（在这种情况下是手机）内。我不确定实现这一目标的正确方法，非常感谢任何帮助！
回答by AlienWebguy
You need to set the z-indexcss property.
您需要设置z-indexcss 属性。
HTML:
HTML：
<img id="png1" src="png1.png" />
<img id="png2" src="png2.png" />
CSS:
CSS：
#png1 {
position:absolute;
top:0;
left:0;
z-index:0;
}
#png2 {
position:absolute;
/*
set top and left here
*/
z-index:1;
}
Here's a demo: http://jsfiddle.net/AlienWebguy/6VSBv/
回答by someone
<img style="position:absolute;left:10px;top:10px;" src="img1.png">
<img style="position:absolute;left:20px;top:20px;" src="img2.png">
Of course, you will need to adjust the coordinates, and I would highly recommend putting the CSS in a stylesheet instead of inline. Here's a pretty good tutorial on CSS for more information: http://www.csstutorial.net/
当然，您需要调整坐标，我强烈建议将 CSS 放在样式表中而不是内联中。这是一个非常好的 CSS 教程以获取更多信息：http: //www.csstutorial.net/
回答by Kalle H. V?ravas
So you are new to html and CSS. That's no problem, but your question is a little bit vague for SO's general format.
所以你是 html 和 CSS 的新手。那没问题，但是您的问题对于SO 的一般格式来说有点含糊。
However, in a nutshell:
但是，简而言之：
<style>
#phone {background: url('http://www.knowabouthealth.com/wp-content/uploads/2010/06/iphone.jpg') center no-repeat; width: 300px; height: 392px; border: 1px solid #000000;}
#display {background: #000000; margin: 80px auto 0px; width: 164px; height: 246px; color: #FFFFFF;}
</style>
<div id="phone">
<div id="display">
Hello! What is up? Miley rocks!
</div>
</div>
Live example: http://jsfiddle.net/cbn4L/
现场示例：http: //jsfiddle.net/cbn4L/
This of course is a extremely simple example. And as you can see the inner container is not a image, but text.. Technically you can add there a image now.. but as we are easing you in to the world of HTML & CSS, then this is a better example and maybe can enhance your concept :)
这当然是一个极其简单的例子。正如您所看到的，内部容器不是图像，而是文本。从技术上讲，您现在可以在那里添加图像。可以增强你的概念:)
