css3里關於背景的屬性增加了可以添加多背景圖的特性，例如：
.box{background: url(img/1.png),url(img/2.png),url(img/3.png);}
這段css代碼，就給.box元素添加了三張背景圖，而正因為有了這樣一個功能，我們可以利用不停的變換這三張背景圖的位置來實現幻燈片切換的效果。
html代碼非常精簡，如下：
<body> <div class="box"> </div> </body>
簡單的給一些樣式：
.box{ width: 300px; height: 300px; border: 1px solid #ccc; background: url(img/1.png),url(img/2.png),url(img/3.png); //加載三張圖片 background-repeat: no-repeat; //不重復 background-size: 100%,100%,100%; //設定圖片顯示尺寸，保障充滿整個div background-position: 0 0,-500px -500px,-500px -500px; //設置三個圖片的偏移量 }
以下是js部分（jq代碼）：
//把背景偏移值放在一個數組里 var arr= $('.qqq').css('backgroundPosition').split(','); var num=0; setInterval(function () { //判斷num值超過變成0 if (num==arr.length) { num=0 } //先把所有的圖片偏移出去 for (var i=0;i<arr.length;i++) { arr[i]='-500px -500px'; } //把當前的圖片偏移值設為0 arr[num]='0 0'; //把弄好的數組轉換成字符串，賦予樣式 var str=arr.join(','); $('.qqq').css('backgroundPosition',str); num++; },1000)
這種方法實現會比以前的在圖片外面套個div效率可高多了，代碼也減少了許多。