使图像在html中重叠两个图像

Question

我想一次将两个图像上的一个图像重叠。就好像第一张图像的一半在上图像上，而另一半在下图像上。

我能以任何方式做到这一点吗？

Answer 1

这样做：

＆＃13;

＆＃13;

.parent{ position: relative }
.images{ position: absolute; top: 0 }
#img1{ left: 50px; z-index: 10 }
#img2{ left: 0; z-index: 1 }
#img3{ left: 100px; z-index: 1 }

＆＃13;

<div class="parent">
  <img class="images" id="img1" src="http://images.clipartpanda.com/girl-smiley-face-clipart-4ibrqK6ig.jpeg">
  <img class="images" id="img2" src="http://www.clker.com/cliparts/V/A/J/Z/0/P/smiley-with-three-eyes-th.png">
  <img class="images" id="img3" src="http://www.clker.com/cliparts/V/A/J/Z/0/P/smiley-with-three-eyes-th.png">
</div>

＆＃13;

＆＃13;

＆＃13;