菜鸟在这里..我正在尝试让我的静态背景变成轮播..我当前的 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 轻松完成吗？或者我应该用 Bootstrap 将我的 html 的内容包装在轮播中吗？我找不到一个很好的例子来说明如何做到这一点。提前致谢。
最佳答案
我会使用 absolute 定位的 DIV 覆盖 body。
使用新图像淡入 DIV，然后将相同的图像设置为 body 并隐藏 DIV，如:
(灰色是BODY，SOrange是DIV)
当前图像Array的自增是通过++counter预增来实现的。
循环修复是使用 Remainder Operator% 来实现的，以防止计数器超过 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/
关于jquery - 如何淡化循环背景图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25799055/