CSS作為頁面美化的重要組成部分，有時候需要展現兩張圖片的交替效果。下面我們來看一個例子：

<div class="image-wrapper">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
</div>

在HTML中，我們需要先將兩張圖片放在同一個容器中，并分別設置它們的src和alt屬性。接下來，我們需要通過CSS來實現圖片的交替顯示效果。

.image-wrapper {
position: relative;
width: 500px;
height: 300px;
}
.image-wrapper img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.image-wrapper img:first-child {
opacity: 1;
}
.image-wrapper:hover img {
opacity: 0;
}
.image-wrapper:hover img:first-child {
opacity: 1;
}

首先，我們為容器設置了position: relative，這是因為圖片絕對定位后需要以容器為相對位置。接下來，我們為圖片設置了position: absolute，這是因為通過絕對定位才能實現圖片的交替效果。我們還設置了圖片的opacity屬性為0，這意味著一開始第二張圖片是在第一張圖片上面的。

接著，我們通過:first-child偽類為第一張圖片設置了opacity: 1，這樣頁面一開始就顯示了第一張圖片。然后，我們為容器設置:hover事件，當鼠標移至容器上時，圖片的opacity將變為0，也就是說第一張圖片會慢慢消失，而第二張圖片也會從“底下”逐漸顯示出來。

最后，我們再通過:hover和:first-child偽類，使得鼠標離開容器時，又回到了第一張圖片的狀態。

以上就是使用CSS實現圖片交替顯示的方法，希望對你有幫助！