如何淡化循环背景图像？答案

【问题标题】：How to fade loop background images?如何淡化循环背景图像？
【发布时间】：2014-11-06 02:06:28
【问题描述】：

这里的菜鸟..我正试图让我的静态背景变成一个轮播..我当前的 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内容包装在带有引导程序的轮播中吗？我找不到一个很好的例子来说明如何做到这一点。提前致谢。

【问题讨论】：

您可以：vegas.jaysalvat.com
知道任何教程吗？以前从未使用过 vegas，所以我不太确定它是什么。
您可以看到：vegas.jaysalvat.com/documentation/setup 它的背景非常简单且响应迅速:)

标签： jquery html css twitter-bootstrap

【解决方案1】：

> 嗨！为此，您必须使用“图层”和 jquery，例如：

<div id="slider1_container">
    <div><img src="image1.jpg" /></div>
    <div><img src="image2.jpg" /></div>
   <div class="wraper">
          .........code
   </div>
</div>

并且在 css 中你已经把对齐 div 的代码放在前面或者返回... jquery 就是这样的：

<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var options = { $AutoPlay: true };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script> 
and css like that: 

position: relative; top: 0px; left: 0px; height: 1000px;

*>记住只是例子，你必须修改代码才能工作

need.and 总是存在互联网上的例子，你可以在这里查阅：*

example slider background

>问候，希望对你有所帮助！

【讨论】：

【解决方案2】：

jsBin demo

我会使用absolute 定位DIV 覆盖body。使用新图像淡入DIV，然后将相同的图像设置为body并隐藏DIV，如： _{（GRAY 是BODY，SOrange 是DIV）}

当前图像Array的增量是通过预增++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%;
}

还有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/

【讨论】：

哇！感谢您的精彩解释和视觉效果。我真的会尝试让这个在我的页面上工作。可能需要我一天左右的时间.. 但确实是一个很好的答案！谢谢
（我修复了代码中的一个小问题（预加载图像循环关闭，将i<0错误更改为i<n）
我实际上注意到了这一点并且想知道.. 哈哈，我注意到你在 jsbin 上加载了 jquery 。我认为 jquery 总是需要加载到你身体的最底部？
@AlexDiVito 你只需要overflow:auto; 见这里：jsbin.com/fakosu/5/edit
@Christina 感谢您的赞许！ :) 是的，16:9 的图像非常小，800x450。我也敢用 640x360！是什么让它们看起来“干净”，即使调整大小是不透明的“像素化”覆盖。如果您想保持清晰度，但同时又希望在移动设备上使用较小的图像，您可以使用 PHP 和 github.com/serbanghita/Mobile-Detect 在第一次请求时检测媒体 -> 更改图像路径，等等！

【解决方案3】：

我最终找到了一个完全符合我要求的页面：

Bootstrap carousel as website background

将向您推荐http://untame.net/2013/04/twitter-bootstrap-carousel/，大约在页面的中途将向您展示如何在不编写任何 JQ 代码的情况下制作引导背景轮播，除了：

$(document).ready(function() {
    $('.carousel').carousel({interval: 7000});
 });

太棒了！

【讨论】：

恕我直言，你能找到的最可怕的插件......你找到了！轮播可能会起作用，但这就是它对背景的作用：mode87.com/untame/demo/carousel/background.html（注意 fade-to-white-cause-we-don't-know-how-to-work-out-transitions i> 效果！）
好吧..我遇到了这个问题，当向下滚动页面时，背景会消失并且只显示白色，所以我现在正在切换回 Roko 的答案！ :P 我遇到了和以前一样的问题，但是溢出了：auto;不工作..如果我不能很快弄清楚的话，我会做bootply..
修复它.. thnx 再次
啊，这是一个愚蠢的错字高度：100%..我的身高：100$%..所以它看起来和以前做的一样，但是背景看起来很棒..我正在考虑像您在示例中那样向#page 添加一个图层.. 我最初认为每个图像都是在photoshop中分层的，但是在第二次浏览您的示例后我意识到您刚刚有一个背景层设置为#page..很酷的概念
不错的错字:) Photoshop 与 CSS 和 JS 无关。我在 google 上找到了 3 张图片，16:9 格式，800x450px，设置为随 JS 变化；但在 CSS3 中，我使用 cover 值使它们全屏显示。 :)