CSS可以通過一些簡單的技巧來實現圖片的切換。下面向大家介紹幾種實現方式。

方法一：使用CSS sprite

.btn {
width: 50px;
height: 50px;
background: url(btn-sprite.png) no-repeat;
background-position: 0px 0px;
}
.btn:hover {
background-position: -50px 0px;
}
.btn:active {
background-position: -100px 0px;
}

方法二：使用CSS animation

@keyframes slide {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.slide {
animation: slide 1s infinite;
background-image: url(slide.png);
background-size: cover;
}

方法三：使用CSS transition

.btn {
background-image: url(btn-normal.png);
transition: background-image 0.2s ease-out;
}
.btn:hover {
background-image: url(btn-hover.png);
}

以上三種方法都可以實現圖片的切換效果，根據具體的需求可以選擇不同的方法。