jquery фонове зображення зникати - jquery, background-image, fadein

Я використовую jQuery для завантаження фонового зображення ina, яке заповнює ширину / висоту сторінки. У мене в голові:

$(document).ready(function() {
$("body").css({
"background-image" : "url({HTML_BASE}images/backgrounds/randoms/{BACK_IMG})",
"background-repeat" : "no-repeat",
"background-position" : "center top",
"background-attachment": "fixed",
"background-size": "100% 100%",
});
$("#home-promo").innerfade({
speed: "slow",
timeout: 5000,
type: "sequence",
containerheight: "auto"
});

$(".model-search").innerfade({
speed: "slow",
timeout: 5000,
type: "sequence",
containerheight: "393"
});

});

Це прекрасно працює і його можна побачити на http://projects.snowshtechnologies.com/golden_dragon/home/

Я хочу, щоб зображення БГ зникало із чорногоколір тла. Я розглянув кілька інших потоків у Stack, які припускають, що це неможливо як елемент тіла, визначений у css, але в цьому сценарії зображення BG завантажується jQuery. Як я міг би додати до цього коду затухання, щоб привнести зображення в приємний фадин?

Відповіді:

ви можете встановити тіло background-color до black а потім зробіть такий елемент, як div, розмістіть його як fixed і потім fade that in, елемент, який повинен заповнювати всю ширину та висоту області перегляду браузера.

Я б просто створив контейнер на верхній частині корпусу на 100% ширини та висоти, щоб заповнити доступний простір і при необхідності вказати a z-index розташувати його нижче інших елементів. Потім встановіть фонове зображення контейнера в CSS і встановіть opacity: 0. Нарешті використовуйте jQuery "s fadeTo() до переходу на 100% непрозорість.

За допомогою переходів CSS3 ви можете додати затухання фонового зображення. Тому якщо ви додасте таку властивість:

transition: background 0.5s;

Для вашого body div ви могли б затягнути браузери, які його підтримують. Однак це не можна підтримувати у браузерах, які не підтримують переходи CSS3.