CSS背景自動切換是一種非常有趣的效果，可以讓網頁更加生動有趣。下面是一個簡單的CSS代碼示例，可以直接使用：

/* 設置背景圖片列表 */
.bg-list {
display: none;
}
.bg-list .bg-item {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
background-size: cover;
background-position: center center;
}
.bg-list .bg-item.active {
opacity: 1;
z-index: 1;
}
/* JS代碼控制輪換 */
var bgItems = document.querySelectorAll('.bg-list .bg-item');
var bgIndex = 0;
setInterval(function() {
bgItems[bgIndex].classList.remove('active');
bgIndex++;
if (bgIndex >= bgItems.length) {
bgIndex = 0;
}
bgItems[bgIndex].classList.add('active');
}, 5000);

代碼中，我們首先定義了一個包含多個背景圖片的列表（.bg-list），每個列表項使用絕對定位將背景圖片覆蓋在整個網頁上，并設置了透明度為0，這樣剛開始時頁面上是看不到這些圖片的。接著我們使用一些CSS過渡效果，在背景圖片間進行透明度的變化，從而實現了自動輪換的效果。最后我們通過JS代碼控制背景圖片的切換，這里我們使用了setInterval函數和classList，每隔5秒鐘切換一下背景圖片的顯示和隱藏。