CSS是一種用于修飾和美化網頁的技術，其中包括了更改背景圖片的功能。有時，我們可能需要自動更換背景圖片，以增強用戶的體驗。本文將介紹如何使用CSS實現自動更換背景圖片。

首先，我們需要準備幾張背景圖片。可以使用本地圖片或者從外部鏈接獲取。下面是我們使用的幾張圖片：

.bg-img-1 {
background-image: url('image-1.jpg,');
}
.bg-img-2 {
background-image: url('image-2.jpg,');
}
.bg-img-3 {
background-image: url('image-3.jpg,');
}

在CSS中，我們可以通過設置class屬性來為元素設置背景圖片。在本例中，我們使用了三個類名（bg-img-1, bg-img-2, bg-img-3），每個類名對應一張背景圖片。

接下來，我們需要編寫JavaScript代碼，以便在每個指定時間間隔（例如每5秒）自動更換背景圖片：

function changeBackground() {
var backgrounds = ['bg-img-1', 'bg-img-2', 'bg-img-3'];
var currentBackground = $('#background-container').attr('class');
var backgroundIndex = backgrounds.indexOf(currentBackground);
var nextBackgroundIndex = (backgroundIndex + 1) % backgrounds.length;
var nextBackgroundClass = backgrounds[nextBackgroundIndex];
$('#background-container').removeClass().addClass(nextBackgroundClass);
setTimeout(changeBackground, 5000);
}
changeBackground();

在上述代碼中，我們首先定義了一個backgrounds數組，其中包含了三個類名，分別對應于三張背景圖片。然后，我們獲取了當前背景圖片的類名，以便查找下一個要顯示的背景圖片。接著，我們計算下一個背景圖片的索引并獲取該背景圖片的類名。最后，我們通過jQuery來移除當前的類名并添加下一個類名，從而實現更換背景圖片的效果。

最后，我們在HTML中添加一個空的元素，并為該元素添加一個id，以便在JavaScript中獲取它：

<div id="background-container"></div>

這樣，我們就成功地使用了CSS和JavaScript來實現自動更換背景圖片的效果。你可以根據需要自定義時間間隔和背景圖片數量，以便實現更加炫酷的效果。