CSS實現切換圖片是一種非常實用的技巧。通常情況下，我們使用JavaScript來實現這個功能，但是CSS也可以勝任這項工作。下面我們就來看看CSS如何實現切換圖片。

首先，我們需要為圖片設置一個容器。這個容器可以是一個div元素或者是一個img元素，可以根據實際情況選擇。接下來，我們需要創建一個與容器寬度和高度相同的偽元素，并將其設置為絕對定位。然后，我們將偽元素的背景圖片設置為我們要切換的圖片之一。

.img-container {
position: relative;
}
.img-container::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(first-image.jpg);
background-size: cover;
}

現在我們已經為容器設置好了偽元素，接下來我們就需要為我們的容器添加hover或者active等偽類，當鼠標移動到容器上時就可以切換圖片了。

.img-container:hover::before {
background-image: url(second-image.jpg);
}

在這里，我們將容器偽元素的背景圖片切換為了第二張圖片。當然，你也可以使用其他偽類來觸發圖片切換，比如active或者focus等。

CSS實現切換圖片可以讓我們在沒有JavaScript的情況下實現相同的效果。當然，在某些情況下，使用JavaScript會更加方便和靈活。不過，使用CSS來實現切換圖片仍然是一項有用的技巧。