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

我有两张照片，一张小一张大

如何在另一个屏幕上显示该屏幕

我的代码：

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

---

使用

位置：绝对

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

---

您需要使用绝对定位的样式。将两个图像放置在

div

中，该div用作偏移图像位置的容器。然后，对于每个图像，添加绝对定位，并使用

left

和

top

样式属性来定位它们。另外，为每个图像添加一个

z-index

style属性。具有最高

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>

#a1
{位置：相对}
#a2
{位置：绝对；顶部：25px；左侧：50px；}

---

您可以使用css3背景图像属性或使用位置：绝对

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