Question

我想将一张图片放在其他图片上。

以下是我的代码：

<div style="position: relative; left: 0; top: 0;">
    <img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
    <img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />            
</div>

css：

#image1
{    
    top: 0; left: 0;
    position:relative;
    z-index:2;
}
#image2
{
    position:relative; left:-70;
    z-index:1;
}

fiddle for that

我希望当我使第二张图像的宽度或高度增加时它也会自动增加。我想将图像2放在图像1上。

任何指导请。

Answer 1

您可以在#image2

中使用 margin-left

 #image1 {    
     top: 0; left: 0;
     position:relative;
     z-index:2; }
 #image2 {
     position:relative; left:-70px;
     z-index:1;
     margin-left: 25px;
 }

Answer 2

检查小提琴：http://jsfiddle.net/r5JMM/5/以获得答案

#image1{position:absolute;}
#image2{position:absolute;resize:both;}
.container{position:relative;}

<div class="container">
    <img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
    <img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />            
</div>

您可以使用jquery resize对图像进行调整大小操作

将一个图像放在另一个图像上

2 个答案: