Question

我有两个图像，一个较小，一个较大。

如何在另一张上显示一张？

我的代码：

<img src="big.jpeg" class="img" id="big">
<img src="small.jpeg" class="img" id="sml">

Answer 1

<div id="a1">
    <img src="http://i.stack.imgur.com/Pxx6V.jpg" id="a1">
    <img src="http://i.stack.imgur.com/kFxC6.jpg" id="a2">
</div>

#a1
{position:relative}
#a2
{position:absolute; top:25px; left:50px;}

FIDDLE

Answer 2

使用position:absolute

div.images{
  border:solid green 4px;
  height:120px;
  width:120px;;
  margin-top: 50px;
  position:relative;
}
.images img{
  position:absolute;
  top:0;
  left:0
}

<强> DEMO

Answer 3

您需要使用绝对定位的样式。将两个图像放在div中，该left用作抵消图像位置的容器。然后，对于每个图像，添加绝对定位并使用top和z-index样式属性来定位它们。此外，为每个图像添加z-index样式属性。具有最高<div style="position: relative"> <img src="big.jpeg" class="img" id="big" style="position: absolute; left: 0; top: 0; z-index: 0"/> <img src="small.jpeg" class="img" id="sml" style="position: absolute; left: 0; top: 0; z-index: 1"/> </div>属性的图像将置于顶部。

{{1}}

如何在另一个图像上显示图像

3 个答案: