CSS3 是一種強(qiáng)大的樣式語言，可以通過它來實(shí)現(xiàn)很多驚艷的效果。其中，圖片更換是一個(gè)比較常見的需求，本文介紹如何使用 CSS3 實(shí)現(xiàn)圖片更換的效果。

/*基礎(chǔ)樣式，定義圖片寬度和高度*/
img{
width: 300px;
height: 200px;
}
/*定義一個(gè)容器元素：*/
.image-container{
position: relative;
overflow: hidden;
}
/*定義兩個(gè)圖片元素，一個(gè)默認(rèn)為顯示狀態(tài)，一個(gè)默認(rèn)為隱藏狀態(tài)*/
.image-container img:first-child{
display: block;
}
.image-container img:last-child{
position: absolute;
top: 0;
left: 0;
display: none;
}
/*鼠標(biāo)懸浮在容器元素上時(shí)，第二個(gè)圖片元素顯示，第一個(gè)圖片元素隱藏*/
.image-container:hover img:first-child{
display: none;
}
.image-container:hover img:last-child{
display: block;
}

以上就是通過 CSS3 實(shí)現(xiàn)圖片更換的基本代碼。首先定義了圖片默認(rèn)的寬度和高度，然后定義一個(gè)容器元素，這個(gè)容器元素需要設(shè)置為相對(duì)定位，并且需要設(shè)置 overflow 屬性，因?yàn)閳D片元素的絕對(duì)定位會(huì)使得容器元素的高度會(huì)被決定為 0。

接下來定義了兩個(gè)圖片元素，第一個(gè)默認(rèn)顯示，第二個(gè)默認(rèn)隱藏。當(dāng)鼠標(biāo)懸浮在容器元素上時(shí)，第一個(gè)圖片元素隱藏，第二個(gè)圖片元素顯示。

最后，通過添加一些過渡效果（如淡入淡出、旋轉(zhuǎn)等）可以使圖片更換效果更加炫酷。需要注意的是，由于 CSS3 并不是所有瀏覽器都支持，所以在編寫代碼時(shí)需要考慮瀏覽器兼容性的問題。