網頁設計中常常用到輪播圖來展示多張圖片，而通過CSS 實現輪播圖的自動切換效果也是一種常用的實現方式。下面將介紹如何使用CSS 實現網頁圖片的自動切換。

首先需要準備多張圖片，并在HTML 中聲明一個圖片容器。例如，下面的代碼中，將使用一個div 元素作為圖片容器，同時在其中添加多個img 元素。

<div class="slider">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
</div>

接下來需要通過CSS 為圖片容器和其中的元素添加樣式。其中，需要將圖片容器設置為相對定位，而其中的img 元素設置為絕對定位，以實現圖片的層疊效果。同時，針對img 元素設置過渡效果，使圖片切換時更加平滑。

.slider {
position: relative;
}
.slider img {
position: absolute;
width: 100%;
height: auto;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img.active {
opacity: 1;
}

上述代碼中，opacity 屬性用于控制元素的透明度，初始值為0，表示圖片不可見。當img 元素被添加active 類時，將opacity 值設置為1，從而使圖片可見。transition 屬性用于設置過渡動畫效果，在本例中，將圖片的透明度動畫設置為1秒鐘內完成。

接下來需要使用JavaScript 實現輪播圖的自動切換。在每次切換圖片時，將之前的圖片元素的active 類移除，并將下一張圖片元素添加active 類。同時，通過setTimeout 方法控制圖片的切換間隔時間。

(function() {
var slides = document.querySelectorAll('.slider img');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 4000);
function nextSlide() {
slides[currentSlide].className = ' ';
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].className = 'active';
}
})();

上述代碼中，首先通過querySelectorAll 方法獲取所有的img 元素，并使用currentSlide 變量來記錄當前顯示的圖片。在nextSlide 方法中，先將當前圖片的active 類移除，再通過currentSlide 變量計算下一張圖片的位置，并將其添加active 類。最后在全局作用域中使用setInterval 方法控制圖片的切換時間間隔。

通過上述步驟，便可實現網頁圖片自動切換的效果。同時，通過CSS 的設置，還可以為圖片添加其他自定義的動畫效果，從而實現更加炫酷的效果。