當(dāng)我們?cè)诰帉?xiě)網(wǎng)頁(yè)時(shí)，有時(shí)需要實(shí)現(xiàn)一些特殊的效果，比如當(dāng)鼠標(biāo)懸浮在圖片上時(shí)，圖片不動(dòng)而背景縮小。這個(gè)效果可以通過(guò)CSS來(lái)實(shí)現(xiàn)。

.img-container {
position: relative;
overflow: hidden;
}
.img-container img {
transition: transform .3s ease;
}
.img-container:hover img {
transform: scale(1.2);
}
.img-container:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-image: url('bg.jpg');
background-size: cover;
transform: scale(1.2);
filter: blur(5px);
}

上面的代碼中，我們首先定義了一個(gè)img-container類(lèi)，它的position屬性為relative，overflow屬性為hidden，這樣可以讓圖片超出容器不可見(jiàn)。然后我們給img標(biāo)簽添加了一個(gè)transition屬性，表示過(guò)渡效果為transform，持續(xù)時(shí)間為.3s，緩動(dòng)方式為ease。

在鼠標(biāo)懸浮在img-container上時(shí)，我們?cè)O(shè)置img的transform屬性為scale(1.2)，即放大1.2倍。同時(shí)，我們使用偽元素::before，添加了一個(gè)背景圖，并將其放大1.2倍，并給它一個(gè)模糊效果。z-index屬性設(shè)置為-1，表示遮蓋在img標(biāo)簽下方。

這樣，當(dāng)鼠標(biāo)懸浮在圖片上時(shí)，圖片不動(dòng)而背景縮小，就實(shí)現(xiàn)了我們想要的效果。