CSS3背景輪播是一個非常優美的網頁設計元素，它能夠給用戶帶來很好的視覺效果，改善用戶的瀏覽體驗。它是使用CSS3的新特性實現的，可以讓你以更加簡單、優美、靈活的方式來制作背景輪播效果。

.slider {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 2s ease-out;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.slide.active {
opacity: 1;
}
.slide:nth-child(1) {
background-image: url('slide1.jpg');
}
.slide:nth-child(2) {
background-image: url('slide2.jpg');
}
.slide:nth-child(3) {
background-image: url('slide3.jpg');
}
.slide:nth-child(4) {
background-image: url('slide4.jpg');
}
.slide:nth-child(5) {
background-image: url('slide5.jpg');
}
.btns {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
height: 10px;
width: 10px;
border-radius: 50%;
margin: 0 10px;
background-color: #fff;
cursor: pointer;
}
.btn.active {
background-color: #000;
}

在這段代碼中，我們定義了一個.slider類來包含我們的輪播圖像，以及一系列幻燈片圖片的.slide類。當幻燈片被選擇時，我們為其添加.active類，并將其不透明度設置為1。

還定義了一個包含幻燈片按鈕的.btns類以及單個幻燈片按鈕的.btn類。當一個幻燈片被選中時，相應按鈕將變成活動狀態。

你可以按自己的喜好來更改輪播圖像的數量和時間逐漸過渡的速度，讓其更符合你網站的需求。