CSS自動輪換圖片，是指利用CSS動畫或者JavaScript特效，讓網頁上的圖片自動輪換，以展示多張圖片或者幻燈片效果。實現自動輪換圖片需要以下步驟：

.slideshow {
position: relative;
}
.slideshow img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s linear;
}
.slideshow img:first-child {
opacity: 1;
}
@keyframes slideshow {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
33.333% {
opacity: 1;
}
53.3333% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.slideshow img:nth-child(2) {
animation-delay: 3s;
}
.slideshow img:nth-child(3) {
animation-delay: 6s;
}
.slideshow img:nth-child(4) {
animation-delay: 9s;
}
.slideshow img:nth-child(5) {
animation-delay: 12s;
}
.slideshow img:nth-child(6) {
animation-delay: 15s;
}
.slideshow img:nth-child(7) {
animation-delay: 18s;
}
.slideshow img:nth-child(8) {
animation-delay: 21s;
}
.slideshow img:nth-child(9) {
animation-delay: 24s;
}
.slideshow img:nth-child(10) {
animation-delay: 27s;
}
.slideshow img:last-child {
animation-name: slideshow;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

以上代碼是一個實現自動輪換圖片的示例，其中有以下幾個關鍵點：

1. 給圖片父元素設置position: relative，為了讓絕對定位的圖片能夠參照物。

2. 給每張圖片設置position: absolute，讓圖片可以重疊在一起，并且通過設置left和top屬性定位到相同的位置。

3. 給每張圖片設置opacity: 0，隱藏圖片。

4. 通過設置CSS動畫的keyframes關鍵幀和animation屬性，定時讓每張圖片顯示，實現輪換圖片效果。

5. 設置每張圖片的animation-delay屬性，讓圖片出現的時間錯開。

6. 最后一張圖片設置了animation-name、animation-duration和animation-iteration-count屬性，讓圖片輪換無限循環。

通過這些CSS代碼，可以讓網頁上的圖片自動輪換，并且支持設置不同的展示時間，從而實現一個較為完善的自動輪換圖片效果。