CSS3的出現，讓網頁設計變得更加美觀和多樣化。其中，圖片更換是網頁設計中非常重要的一部分。在這篇文章中，我將分享一些使用CSS3對圖片更換的技巧。

首先，我們需要使用CSS樣式表中的background-image屬性來更換圖片。下面是一個基本的例子：

background-image: url("example.jpg");

在這個例子中，我們使用了url()函數來指定新圖片的路徑。

接下來，我們可以使用:hover偽類來實現鼠標懸停時更換圖片的效果。下面是一個例子：

.example {
background-image: url("example.jpg");
width: 200px;
height: 200px;
transition: background-image 0.5s ease;
}
.example:hover {
background-image: url("new-example.jpg");
}

在這個例子中，我們使用transition屬性來實現圖片更換的動畫效果。

另外，我們還可以使用@media規則來實現在不同設備下的圖片更換。例如：

.example {
background-image: url("example.jpg");
width: 200px;
height: 200px;
}
@media screen and (max-width: 768px) {
.example {
background-image: url("small-example.jpg");
}
}

在這個例子中，我們使用了@media規則來指定在視口寬度小于等于768px的設備下使用新的圖片。

總之，使用CSS3來更換圖片是一個簡單并且有用的技巧。通過靈活運用各種CSS屬性和偽類，我們可以實現更加豐富多樣的網頁設計效果。