CSS3是一種能夠美化頁面樣式的技術，在它的諸多屬性中，切換圖片屬性常常被用來實現圖片的動態切換。今天我們就來學習一下CSS3的切換圖片屬性吧。

/*CSS3切換圖片屬性語法*/
div {
background-image: url(pic1.jpg);
transition: background-image .5s ease;
}
div:hover {
background-image: url(pic2.jpg);
}

如上代碼所示，我們可以通過CSS3的background-image屬性來設定要顯示的背景圖片。然后再使用transition屬性來設置過渡效果，這里的過渡效果是在0.5s內漸變完成的。當鼠標滑過時，改變顯示的背景圖片即可實現圖片的切換。嘗試一下吧！

除了使用鼠標滑過來切換圖片，我們還可以使用一些其他的觸發方式。例如，我們可以在一個按鈕上添加點擊事件來切換圖片。下面的代碼演示了如何使用HTML標記和CSS3屬性結合實現按鈕點擊圖片切換的效果。

/*CSS3切換圖片屬性與HTML代碼結合*/
.btn {
width: 100px;
height: 40px;
background-image: url(pic1.jpg);
transition: background-image .5s ease;
}
.btn:active {
background-image: url(pic2.jpg);
}

如上代碼中，我們使用了.btn樣式類來定義按鈕的樣式。我們將要顯示的背景圖片設為了pic1.jpg，并且添加了transition屬性來設置過渡效果。當按鈕被激活時（即點擊時），我們將背景圖片改為pic2.jpg即可實現點擊切換圖片的效果。這樣，當我們在網頁設計中需要使用到圖片切換時，就可以輕松地使用CSS3來實現了。