Question

我正在尝试将图像安装在另一个（略大）图像的中间，以使其看起来在较大的图像内（在这种情况下是手机）。我不确定实现这一目标的正确方法，非常感谢任何帮助！

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

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

Answer 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＆amp; CSS，那么这是一个更好的例子，也许可以增强你的概念：）

如何在网站中叠加图像（png）？

3 个答案: