[分享]css划过图片图片显示图片

在网站设计中，图片的使用是非常重要的一环。而使用CSS来处理图像的效果也是一种非常有用的技巧。今天我们来学习如何使用CSS划过图片使得图片显示另一张图片。首先，我们需要了解一下CSS中的"h...

在网站设计中，图片的使用是非常重要的一环。而使用CSS来处理图像的效果也是一种非常有用的技巧。今天我们来学习如何使用CSS划过图片使得图片显示另一张图片。

首先，我们需要了解一下CSS中的"hover"伪类。"hover"伪类可以在鼠标指针悬停在元素上时改变元素的样式。我们可以使用这个伪类来实现图片划过。

img {
  transition: opacity 0.5s ease-in-out;
}

img:hover {
  opacity: 0;
} 

上面的代码演示了当鼠标悬停在图片上时图片的透明度会由1（完全不透明）变成0（完全透明），从而隐藏掉原来的图片。

但这不是我们想要的效果。我们希望鼠标悬停时显示另外一张图片。所以我们需要为原始的图片添加一个容器，并在容器中添加新的图片。

<div class="img-container">
  <img src="original-image.jpg">
  <img src="hover-image.jpg" class="hover-img">
</div> 

使用CSS来控制这两张图片的显示和隐藏。我们可以将原始的图片的透明度减少到0，同时悬停时使得新的图片的透明度变成1。这样整个过渡就有了更加优美的效果。

.img-container {
  position: relative;
}

.hover-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.img-container:hover .hover-img {
  opacity: 1;
}

.img-container:hover img:first-child {
  opacity: 0;
} 

如上所示，我们使用了绝对位置将新的图片覆盖在原先的图片上。在划过时，新的图片的透明度变成了1，因此它就显示了出来。而原始的图片则被隐藏了。

以上就是这次CSS划过图片的教程了。希望本文对于大家的学习有所帮助。