今天我們來(lái)介紹一種很常用的CSS技巧——實(shí)現(xiàn)img圖片切換。利用CSS中的:hover偽類(lèi)和background-image屬性，我們可以在鼠標(biāo)懸停在圖片上時(shí)，實(shí)現(xiàn)圖片的切換效果。
首先，我們需要將img標(biāo)簽改為一個(gè)div，通過(guò)CSS將圖片作為div的一個(gè)背景。例如：

.img{
width: 200px;
height: 200px;
background-image: url('img1.jpg');
background-size: cover; /*保證圖片始終鋪滿(mǎn)整個(gè)div*/
}

接下來(lái)，我們要實(shí)現(xiàn)圖片的切換。我們可以通過(guò)綁定:hover事件，來(lái)改變div的背景圖片。例如：

.img:hover{
background-image: url('img2.jpg');
}

這樣，當(dāng)鼠標(biāo)懸停在.img這個(gè)div上時(shí)，圖片就會(huì)由img1.jpg切換成img2.jpg。特別地，我們還可以添加transition屬性，來(lái)實(shí)現(xiàn)圖片切換的平滑過(guò)渡。例如：

.img{
transition: background-image 0.3s;
}

通過(guò)上面的CSS代碼，我們就可以實(shí)現(xiàn)img圖片切換的效果了。整個(gè)CSS代碼如下：

.img{
width: 200px;
height: 200px;
background-image: url('img1.jpg');
background-size: cover;
transition: background-image 0.3s;
}
.img:hover{
background-image: url('img2.jpg');
}

以上就是實(shí)現(xiàn)img圖片切換的CSS技巧。可以讓你的網(wǎng)站更加生動(dòng)，讓用戶(hù)在瀏覽你的網(wǎng)頁(yè)時(shí)，有更好的體驗(yàn)。