[分享]css两张图重叠显示一半

CSS可以让我们实现很多有趣的效果，比如两张图重叠显示一半的效果。我们可以使用标签来包裹两张图片，然后使用CSS来实现这个效果。 以上是HTML代码，接下来我们来看CSS代码。/ 设置包裹图片的d...

CSS可以让我们实现很多有趣的效果，比如两张图重叠显示一半的效果。

我们可以使用<div>标签来包裹两张图片，然后使用CSS来实现这个效果。

<div class="overlap">
  <img src="img1.jpg" alt="image 1">
  <img src="img2.jpg" alt="image 2">
</div>

以上是HTML代码，接下来我们来看CSS代码。

/* 设置包裹图片的div为相对定位 */
.overlap {
  position: relative;
}

/* 设置其中一张图片的位置 */
.overlap img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  z-index: 1; /* 设为1使其在另一张图片上方显示 */
}

/* 设置另一张图片的位置 */
.overlap img:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
}

以上就是实现这个效果所需要的CSS代码。我们通过给包裹图片的<div>设置相对定位，然后分别给两张图片设置绝对定位和不同的left、right、top以及bottom来完成这个效果。

这是一个简单而有趣的CSS效果，如果你感兴趣的话，不妨尝试一下吧。