Как изменить фон тега 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 –

фоновый ТЕЛА, что вы ищете, я думаю ... –

вы выцветания HTML-элемент - вы не можете приглушить фон, если это не в качестве элемента своей собственной. Вы можете сделать div, который сидит за всем сайтом и вместо этого исчезнет. – Archer

-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 автоматически?

ответ

Смежные вопросы