在網頁設計中，經常需要在頁面中自動播放圖片，使得頁面更加生動和動態。CSS提供了一個很好的方法來實現這一功能。

html, body{
height: 100%;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow: hidden;
}
.slide{
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: slide 10s infinite;
}
.slide:nth-child(1){
background-image: url("image1.jpg");
}
.slide:nth-child(2){
background-image: url("image2.jpg");
}
.slide:nth-child(3){
background-image: url("image3.jpg");
}
@keyframes slide{
0%{
opacity: 0;
transform: scale(1.2);
}
5%{
opacity: 1;
transform: scale(1);
}
20%{
opacity: 1;
}
25%{
opacity: 0;
transform: scale(1.2);
}
100%{
opacity: 0;
transform: scale(1.2);
}
}

上述代碼通過CSS實現了圖片的自動播放功能，效果如下：

在代碼中，使用了flex布局使得圖片可以在容器中居中顯示。每張圖片都設置了為100%寬度和高度，等比例縮放以適應容器。通過nth-child選擇器，為每張圖片設置不同的背景圖。在使用keyframes創建動畫時，設置了透明度和縮放倍數的變化，實現了圖片淡入淡出的效果。最后，通過animation屬性將動畫應用到每張圖片上，循環播放。

使用CSS實現自動播放圖片，代碼簡潔易懂，而且可以在不使用JavaScript的情況下完成，一定程度上減輕了頁面的加載時間和服務器壓力，是一種很好的實現方式。