我知道我迟到了，但我找到了一种使用 jquery 的方法，该方法适用于每个浏览器（我在 chrome、firefox 和 Ie 9 上对其进行了测试）并且总是显示前景元素而不是 css3 转换属性。
创建 2 个绝对包装器并使用 z-index。
首先将必须在前景中的元素设置为具有最高的 z-index 属性值，并设置其他元素（都包含在 body 中，因此：body{}）具有较低的 z-index 属性值比前景元素的一个，至少低 2 个。
HTML 部分：
<div class="wrapper" id="wrapper1"></div>
<div class="wrapper" id="wrapper2"></div>
css 部分：
.fore-groundElements{ //select all fore-ground elements
z-index:0; //>=0
}
.wrapper{
background-size: cover;
width:100%;
height:100%;
background-size: 100% 100%;
position:absolute;
}
#wrapper1{
z-index:-1;
}
#wrapper2{
z-index:-2;
}
body{
height:100%;
width:100%;
margin:0px;
display:cover;
z-index:-3 //<=-3
}
比 javascript/jquery 之一：
我需要每三秒更改一次背景图像，所以我使用了设置的超时时间。
这是代码：
$(document).ready(main);
var main = function(){
var imgPath=[imagesPath1,..,...]; // the array in which store the image paths
var newWrapper; // the wrapper to display
var currentWrapper; //the current displayed wrapper which has to be faded
var l=2; // the next image index to be displayed, it is set to 2 because the first two position of the array(first two images) start already setted up
var imgNumber= imgPath.length; //to know when the images are over and restart the carousel
var currentImg; //the next image path to be displayed
$('#wrapper1').css("background-image", 'url'+imgPath[0]); //pre set the first wrapper background images
$('#wrapper2').css("background-image", 'url'+imgPath[1]); //pre set the first wrapper background images
setInterval(myfunction,3000); //refresh the background image every three seconds
function myfunction(){
if(l===imgNumber-1){ //restart the carousel if every single image has already been displayed
l=0;
};
if(l%2==0||l%2==2){ //set the wrapper that will be displaied after the fadeOut callback function
currentWrapper='#wrapper1';
newWrapper='#wrapper2';
}else{
currentWrapper='#wrapper2';
newWrapper='#wrapper1';
};
currentImg=imgPath[l];
$(currentWrapper).fadeOut(1000,function(){ //fade out the current wrapper, so now the back-ground wrapper is fully displayed
$(newWrapper).css("z-index", "-1"); //move the shown wrapper in the fore-ground
$(currentWrapper).css("z-index","-2"); //move the hidden wrapper in the back ground
$(currentWrapper).css("background-image",'url'+currentImg); // sets up the next image that is now shown in the actually hidden background wrapper
$(currentWrapper).show(); //shows the background wrapper, which is not visible yet, and it will be shown the next time the setInterval event will be triggered
l++; //set the next image index that will be set the next time the setInterval event will be triggered
});
}; //end of myFunction
} //end of main
我希望我的回答是清楚的，如果您需要更多解释，请评论它。
对不起我的英语:)