如何淡化循环背景图像？

Question

如何淡化循环背景图像？

Sup*_*etz 6 html css jquery css3 twitter-bootstrap

新手在这里..我正在努力让我的静态背景变成旋转木马......我现在的html看起来像这样:

<body>
    <div class="pageContent">
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

和我的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;
}

Run Code Online (Sandbox Code Playgroud)

所以我想让背景现在循环图像并保持响应.这可以使用CSS3轻松完成吗？或者我应该将我的html内容包装在带引导程序的旋转木马中？我无法找到如何做到这一点的好例子.提前致谢.

Answer 1

Rok*_*jan 12

jsBin演示

整页画廊淡出

我会使用absolute定位DIV覆盖的方式来做body.淡入DIV新图像,然后将相同的图像设置为body隐藏状态DIV:( _{灰色是BODY,SOrange是DIV)}

响应背景淡出画廊逻辑

通过预先增量实现当前图像阵列的增量++counter.

使用剩余运算符实现循环修复,%以防止计数器超出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%;
}

Run Code Online (Sandbox Code Playgroud)

和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();
  });
}());

Run Code Online (Sandbox Code Playgroud)

编辑:如果你想保持背景改变,但让内容可滚动,只需添加overflow:auto;到#page这个演示: http: //jsbin.com/huzayiruti/1/

归档时间：	11 年，1 月前
查看次数：	4582 次
最近记录：	10 年，2 月前