[分享]css两张重叠的图片切换

CSS技巧之：两张重叠的图片切换。有时候在网页中需要实现两张图片的切换效果，比如展示产品的多角度，或者表现比较直观的前后对比，这时候可以考虑使用两张重叠的图片实现这一效果。下面是一种CSS实现方式： ...

CSS技巧之：两张重叠的图片切换。有时候在网页中需要实现两张图片的切换效果，比如展示产品的多角度，或者表现比较直观的前后对比，这时候可以考虑使用两张重叠的图片实现这一效果。下面是一种CSS实现方式：

<div class="image-box">
  <img class="img1" src="image1.jpg" />
  <img class="img2" src="image2.jpg" />
</div>

.image-box {
  position: relative;
  display: inline-block;
  width: 500px;
  height: 500px;
}

.img1, .img2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity .5s;
}

.img2 {
  opacity: 0;
}

.image-box:hover .img1 {
  opacity: 0;
}

.image-box:hover .img2 {
  opacity: 1;
} 

这里我们首先使用一个div包裹两张图片，让它们重叠显示。然后我们通过CSS的position属性，将img元素的定位设为绝对定位。然后将其中一个图片的opacity属性设置为0，这样初始时只会显示另一个图片。

接下来，我们使用:hover伪类选择器，当鼠标悬停在图片上时，切换显示的图片。这里我们使用CSS3过渡（transition）属性，让切换效果更加平滑。

如此简单的CSS，就实现了两张重叠图片的切换效果。你还可以使用JavaScript等其它方式实现类似效果。