新手在这里..我正在努力让我的静态背景变成旋转木马……我现在的html看起来像这样：
<body>
<div class="pageContent">
</div>
</body>
和我的CSS：
body {
background: url('http://placehold.it/1600x1200') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
所以我想让背景现在循环图像并保持响应.这可以使用CSS3轻松完成吗？或者我应该将我的html内容包装在带引导程序的旋转木马中？我无法找到如何做到这一点的好例子.提前致谢.
解决方法
jsBin demo
我会使用覆盖身体的绝对定位DIV来做到这一点.
使用新图像淡入DIV,然后将相同的图像设置为正文并隐藏DIV,如：
(灰色是身体,SOrange是DIV)
通过预先递增计数器来实现当前图像阵列的增量.
使用剩余运算符％可以实现循环修复,以防止计数器超出Array中的图像数量.
循环本身是在.fadeTo()回调函数内完成的,只需执行loopBg()函数的新迭代即可.
这是需要的CSS：
*{margin:0;padding:0;} /* Global reset */
html,body{height:100%;width:100%;}
body,#bg{ background: #000 none 50% / cover; }
#bg{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
}
和jQ：
var images = [
"bg0.jpg","bg1.jpg","bg2.jpg"
];
var $body = $("body"),$bg = $("#bg"),n = images.length,c = 0; // Loop Counter
// Preload Array of images...
for(var i=0; i<n; i++){
var tImg = new Image();
tImg.src = images[i];
}
$body.css({backgroundImage : "url("+images[c]+")"});
(function loopBg(){
$bg.hide().css({backgroundImage : "url("+images[++c%n]+")"}).delay(2000).fadeTo(1200,1,function(){
$body.css({backgroundImage : "url("+images[c%n]+")"});
loopBg();
});
}());
编辑：如果你想保持背景改变但是可以滚动内容,只需添加overflow：auto;到这个演示中的#page：http://jsbin.com/huzayiruti/1/
