如何自動更改html標籤的背景？

我使用的CSS代碼中添加一個後臺整個網站是這樣的：如何自動更改html標籤的背景？

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);

此代碼衰落的整個網站（不只是背景），然後褪去整個網站的新背景。有沒有辦法淡出僅僅是整個網站的背景？

來源

2014-09-23 Basel Shbeb

請問您可以添加jsfiddle – 2014-09-23 13:26:51

BODY背景是你在找什麼，我猜... – 2014-09-23 13:27:24

你正在消失的HTML元素 - 你不能淡化背景，除非它是在它自己的元素。您可以製作一個位於整個網站後面的div，然後淡入淡出。 – Archer 2014-09-23 13:27:37

-1

您需要連接到你的頁面背景「格」元素，以100％該元素的傳播100％，您可以將想要的效果

來源

2014-09-23 13:27:39

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.

來源

2014-09-23 13:39:37

如何自動更改html標籤的背景？

回答

相關問題