[分享]css两张图片切换的代码

在网页设计的过程中，我们常常会用到图片的切换效果，而CSS提供了一种非常方便的实现方式——通过backgroundimage的切换来实现两张图片之间的转换。下面是一个基本的实现代码： .image ...

在网页设计的过程中，我们常常会用到图片的切换效果，而CSS提供了一种非常方便的实现方式——通过background-image的切换来实现两张图片之间的转换。

下面是一个基本的实现代码：

 <div class="image"></div>

    <style>
        .image {
            width: 300px;
            height: 300px;
            background-image: url('img1.jpg');
            background-size: cover;
            transition: background-image 1s ease-in-out;
        }

        .image:hover {
            background-image: url('img2.jpg');
        }
    </style> 

上述代码中，我们首先设置了一个div容器，并给它定义了宽和高。接着，我们设置了div的背景图片为img1.jpg，设置了背景图片的大小为cover，这样可以让图片完全覆盖div容器。然后，在div的样式中，我们用CSS3的transition属性来设置一个渐变过度效果，当div的背景图片改变时，过程持续1秒，以动画方式呈现。

最后，我们在:hover伪类中，通过更改div的背景图片为img2.jpg，来达到图片切换的效果。

当然，这只是最基本的实现方式，我们还可以通过JavaScript等其他方式，实现更复杂的图片切换效果，如轮播图等。