Блог

Главная - Вопросы по программированию - Переход между фоновыми изображениями, объявленными в теге HTML CSS

Переход между фоновыми изображениями, объявленными в теге HTML CSS

#jquery #css

#jquery #css

Вопрос:

Я могу изменить свое фоновое изображение с помощью:

  $('html').css({background : 'url(http://www.cyberth.com/images/background_aporia.jpg)'});

Как я могу добиться затухания при переходе между двумя изображениями. Если я могу избежать этого, я не хочу использовать для этого внутреннее тело div.

похоже, что-то подобное не работает:

  $('html').not('body').fadeOut("slow");

Установка непрозрачности в теге html также каскадируется вниз, даже если я изменяю z-индекс html на 1, а тело на 2.

Мое фоновое объявление в css выглядит следующим образом:

  html { 
     background: url(http://www.cyberth.com/images/background_odonata.jpg) 
     no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

Комментарии:

1. непрозрачность автоматически присваивается inherited дочерним элементам и будет влиять на всех дочерних элементах, поскольку ваш body является дочерним элементом html it will inherit it’s opacity, и вы ничего не можете сделать, чтобы изменить это 🙂 если вы не используете фоновое изображение sprite (png с диапазоном непрозрачности) 🙂 затем анимируйте backgroun-position , если сможете 🙂

2. могу ли я использовать какие-либо анимации jquery для достижения того, что мне нужно?

Ответ №1:

Вы могли бы применить фон не к html, а к div с абсолютной позицией со 100% шириной и высотой с отрицательным z-индексом. Тогда вы должны иметь возможность выполнять любые действия с этим div, не затрагивая ничего другого. Затем вы даже могли бы использовать для этого плагин, подобный jquery cycle. http://jquery.malsup.com/cycle /