CSS是前端開發中不可缺少的一部分，它可以通過各種方法，讓我們的網頁界面更加漂亮。其中，背景圖片的循環播放可以為網頁增色不少，那么，下面我們就來介紹如何用CSS讓圖片循環播放。

要讓圖片循環播放，我們需要借助CSS3的animation動畫屬性。首先，我們需要準備好需要循環播放的圖片。

//html代碼
<div class="image"></div>

在CSS中，我們需要定義動畫，來讓圖片進行循環播放。下面是需要定義的CSS代碼。

//css代碼
.image {
width: 200px;
height: 200px;
background-image: url("1.jpg");
animation: slide 10s infinite;
}
@keyframes slide {
0% {
background-image: url("1.jpg");
}
33% {
background-image: url("2.jpg");
}
66% {
background-image: url("3.jpg");
}
100% {
background-image: url("1.jpg");
}
}

其中，animation屬性包含三個參數，分別是動畫名稱、動畫持續時間和動畫播放次數。這里我們設置為infinite，表示無限循環播放。

而@keyframes則是我們定義的動畫，可以設定多個時刻點，這些時刻點可以對應不同狀態下的樣式，比如每隔三分之一時間就換一張圖片。如上面代碼中所示，我們將從0% - 100% 設置四個時刻點，每次切換圖片的時間間隔為10秒。

通過以上代碼，我們就可以讓背景圖片自動循環播放了。當然，還有其他一些設置和細節需要注意，我們可以根據實際需求進行修改和優化。