如何在网站内叠加图像 (png)？答案

【问题标题】：How can I overlay images (png) within a website?如何在网站内叠加图像 (png)？
【发布时间】：2011-11-09 12:47:12
【问题描述】：

我正在尝试将图像安装在另一个（稍大）图像的中间，以便它看起来在更大的图像（在这种情况下是电话）内。我不确定实现这一点的正确方法，非常感谢任何帮助！

【问题讨论】：

【解决方案1】：

您需要设置z-index css 属性。

HTML：

<img id="png1" src="png1.png" />
<img id="png2" src="png2.png" />

CSS：

#png1 {
    position:absolute;
    top:0;
    left:0;
    z-index:0;
}

#png2 {
    position:absolute;
    /*
    set top and left here
    */
    z-index:1;
}

这是一个演示：http://jsfiddle.net/AlienWebguy/6VSBv/

【讨论】：

啊！非常感谢，非常直接！保持真棒！
另一个快速的问题，抱歉我的无知 oO，但是如果 png1 的定位是通过 html 居中的，而不是在提供的示例中的左上角，我该如何设置定位的 png2 相对于它（我认为这是有道理的，如果不让我知道！）非常感谢！
没关系，我想我是在寂寞中想通的，再次感谢您！我检查了它！最美好的祝愿！

【解决方案2】：

<img style="position:absolute;left:10px;top:10px;" src="img1.png">
<img style="position:absolute;left:20px;top:20px;" src="img2.png">

当然，您需要调整坐标，我强烈建议将 CSS 放在样式表中而不是内联。这是一个关于 CSS 的非常好的教程以获取更多信息：http://www.csstutorial.net/

【讨论】：

【解决方案3】：

所以你是 html 和 CSS 的新手。没问题，但是你的问题对于SO's general format来说有点含糊。

不过，简而言之：

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

现场示例：http://jsfiddle.net/cbn4L/

这当然是一个极其简单的例子。正如您所看到的，内部容器不是图像，而是文本。从技术上讲，您现在可以在其中添加图像。但是当我们让您轻松进入 HTML 和 CSS 世界时，这是一个更好的例子，也许可以增强您的概念:)

【讨论】：

这根本不能回答 OP 的问题。您没有在这里覆盖任何 PNG。
@Matt Anderson：嗯，OP 显然是初学者.. 所以如果外部图像是电话，那么我的示例可能类似于他的更高目标。所以从技术上讲，这更像是一个教学和替代答案——试图理解 OP 真正想要做什么。