CSS是前端開發中非常重要的一部分，它能實現頁面中許多精美的效果。

其中鼠標經過背景圖放大效果是一種很常見的效果，我們可以通過CSS來實現它。

.box{
background-image: url("../image/bg.jpg");//背景圖
width: 200px;//盒子寬度
height: 200px;//盒子高度
background-size: cover;//背景圖片自適應寬高
transition: all 0.5s;//動畫時間
position: relative;//設置相對定位，方便后續的絕對定位
cursor: pointer;//設置鼠標指針
}
.box:before{
content: ””;//設置偽元素，方便后續的背景圖絕對定位
position: absolute;
top: 0;
left: 0;
z-index: -1;//設置z-index，使偽元素在背景圖下面
width: 100%;
height: 100%;
background-image: url("../image/bg.jpg");//偽元素背景圖
background-size: cover;//自適應寬高
filter: blur(10px);//背景圖模糊效果
transform: scale(1.5);//默認縮放1.5倍
opacity: 0;//默認透明
transition: all 0.5s;//動畫時間
}
.box:hover:before{
opacity: 1;//鼠標經過時透明度為1
transform: scale(1.2);//鼠標經過時縮放1.2倍
}

以上CSS代碼就能夠實現鼠標經過背景圖放大的效果了。需要注意的是，通過偽元素來實現背景圖縮放時，需要設置z-index，將偽元素放在背景圖下面；同時因為偽元素是絕對定位的，所以需要將盒子設置為relative定位，以便后續操作。

以上就是CSS鼠標經過背景圖放大效果的實現方法。希望能對大家有所幫助。