CSS背景圖隨機變換位置對于美化頁面至關重要。通過隨機變換背景圖的位置可以讓頁面更加生動有趣，增強網站的視覺效果。本文將介紹如何使用CSS實現隨機變換背景圖位置。

/* 定義背景圖數組 */
var img_arr = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg'];
/* 定義函數——隨機生成一個背景圖 */
function randomImg() {
var imgIndex = Math.floor(Math.random() * img_arr.length);
var imgUrl = img_arr[imgIndex];
return imgUrl;
}
/* CSS代碼，隨機變換背景圖位置 */
body {
background: url(randomImg());
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position-x: calc(50% + Math.random() * 100 - 50%);
background-position-y: calc(50% + Math.random() * 100 - 50%);
}

通過定義一個包含多張背景圖的數組，同時在CSS樣式中通過JS函數調用隨機的背景圖，然后使用calc函數在水平和豎直方向上隨機變換位置來實現隨機變換背景圖位置，從而達到不同視覺效果的目的。

總之，CSS背景圖隨機變換位置是一種簡單而有效的美化頁面的方法，可以給網站注入新的生命，讓用戶留下良好的印象。希望本文介紹的方法對于大家在實際開發中有所幫助。