對于網頁設計來說，圖片是一個非常重要的元素。當我們想要修改網頁中的圖片時，經常需要手動修改html代碼，這樣費時費力，也容易出錯。但是，使用CSS，我們可以輕松地更換網頁中的圖片。

<style>
.image{
width: 200px;
height: 200px;
background-image: url("default.jpg");
background-size: contain;
cursor: pointer;
}
.image:hover{
background-image: url("hover.jpg");
transition: background-image .5s ease-in-out;
}
</style>
<div class="image"></div>

以上代碼中，我們首先定義了一個class為image的div元素，并設置了其寬度、高度、背景圖片以及鼠標指針樣式。這里默認顯示的是default.jpg圖片。

接著，當鼠標懸停在該元素上時，我們在CSS中添加:hover偽類，將背景圖片更換為hover.jpg，并設置了一個0.5秒的過渡效果。

這樣，當用戶點擊該圖片時，就能觸發Hover效果，達到更換圖片的效果。

上面是一個簡單的實現更換圖片的方法，我們還可以通過JavaScript來實現更復雜的效果。然而，基于簡單易用的原則，如果只是簡單的更換圖片，使用CSS偽類來實現會相對更加方便。