javascript - 如何自动更改html标签的背景？

Question

我使用 css 代码为整个网站添加背景，如下所示:

html { 
      background: url('../include-uploads/backgrounds/ironman1.jpg') no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

我想使用如下 jQuery 代码自动更改它:

var old_url=$('html').css('background-image');
$('html').css('background-image',old_url).fadeOut(1000);
setTimeout(function(){
     $('html').css({"background":"url(include-uploads/backgrounds/ironman2.jpg) no-repeat"}).fadeIn(5000);
       $('html').css({"-webkit-background-size": "cover"});
       $('html').css({"-moz-background-size": "cover"});
      $('html').css({"-o-background-size": "cover"});
       $('html').css({"background-size": "cover"});
     }, 5000);

此代码使整个网站淡出(不仅仅是背景)，然后使整个网站淡入新背景。有没有办法只淡出背景而不是整个网站？

Answer 1

CSS 解决方案:

$('html').addClass('light');
setTimeout( function() { $('html').removeClass('light'); }, 4000 );

* {
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: url(http://static.pexels.com/wp-content/uploads/2014/09/ocean-sea-sky-2808-527x350.jpg) center center no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 0 10000px transparent;
    transition: 4s all;
}

.light {
    box-shadow: inset 0 0 0 10000px white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper.