CSS3中提供了背景圖片從大變小的動態效果，可以為網站增加更豐富的視覺效果，提升用戶的體驗感。本文將介紹如何使用CSS3實現圖片背景從大變小的效果。

html {
height: 100%;
}
body {
height: 100%;
background: url(bg_img.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

上述代碼中，我們為body元素設置了背景圖片，使用了CSS3的background-size屬性，將圖片覆蓋整個body的區域，并保持圖片的寬高比例不變。

.box {
width: 300px;
height: 200px;
margin: 50px auto;
background: #fff url(bg_img2.jpg) no-repeat center center;
background-size: 100% 100%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.box:hover {
background-size: 120% 120%;
}

接下來，我們創建一個包裹圖片的容器，使用CSS3的transition屬性，實現了圖片大小的過渡效果。當鼠標位于容器上方時，將圖片大小調整為原大小的1.2倍。

通過以上代碼，我們可以實現css3圖片背景從大變小的動態效果，可以根據自己的需求，調整圖片的大小和過渡時間，讓你的網站更加生動有趣。