一个div作为fullScreen的背景

Question

我正在开发一页。在页面内部，我希望有背景图像，这些图像应逐个淡入和淡出。

我用 jQuery 函数控制这个过程，但我还有一个问题，我怎样才能把一个 div（div 包含图像）作为我的背景？

我希望 div 布局成为我的背景，然后使用 jQuery 更改它们。

$(document).ready(function(){
  // run every 7s
  raiseToSunrise(1000)
});

function raiseToSunrise(interval) {
  var num = 1;

  var theinterval = setInterval(function() {
    var $active = $('#wrapper .active');
    console.log($active);
    //var $next = ($active.next().length > 0) ? $active.next() : $('#layout img:first');
    var $next = $active.next();
    $next.css('z-index',1);//move the next image up the pile

    $active.fadeOut(8000,function(){//fade out the top image
      $active.css('z-index',0).show().removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',2).addClass('active');//make the next image the top one
    });
    num = num+1;
    if (num == 4) {
      clearInterval(theinterval);
      return;
    }
  }, interval);
}

#layout {
  position: absolute;
  z-index:-1;
  height:10%;
}

#layout img {
  position: absolute; 
  z-index:0; 
}

#layout img.active {
  z-index:2;
}

.canvas {
  z-index=10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">			
  <div id="main">				
    <!-- Header -->
    <header id="header">
      <div id="title">
        <h1><img src="assets/css/images/img_logo.png"></h1>						
      </div>
      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>

      <div class="layout">
        <img class="active" src="assets/css/images/img_background_night1.jpg" />
        <img class="active" src="assets/css/images/img_background_sunrise1.jpg" />
        <img class="active" src="assets/css/images/img_background_day1.jpg" />
      </div>

      <!--	<div id="wrapper_top"  style="                       
position: relative;
z-index: 0;"> 
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<div id="#content"
style="
position: absolute;
z-index: 2;
color: #ffffff;">   
</div>  
<div id="wrapper_bottom" 
style="
z-index: -1;
top: 0;
height: 100%;
position: absolute;
width: 100%;"
>
</div>
</div>    -->
      <div id="botton">
        <nav>
          <ul>
            <li><a class='icon sensor_button sensor_up_right' id ='sensor_1' onclick="clickedSensor(0);" href="#"><img src="assets/css/images/img_sensor_1.png"></a></li>
            <li><a class='icon sensor_button sensor_up_left' id ='sensor_2' onclick="clickedSensor(1);" ><img src="assets/css/images/img_sensor_2.png"></a></li>
            <li><a class='icon sensor_button sensor_center' id ='sensor_3' onclick="clickedSensor(2);" ><img src="assets/css/images/img_sensor_3.png"></a></li>
            <li><a class='icon sensor_button sensor_arm_right' id ='sensor_4' onclick="clickedSensor(3);" ><img src="assets/css/images/img_sensor_4.png"></a></li>
            <li><a class='icon sensor_button sensor_arm_left' id ='sensor_5' onclick="clickedSensor(4);"><img src="assets/css/images/img_sensor_5.png"></a></li>
          </ul>

        </nav>
        <div id='sensor_info' >
          <div id='sensor_title'>
          </div>
          <div id='sensor_message'>
          </div>
        </div>
      </div>
    </header>


  </div>
</div>

Answer 1

试试这个，但用 css 中的背景图像替换常规图像：http://css3.bradshawenterprises.com/cfimg/