obraz tła jquery zniknie - jquery, background-image, fadein

Korzystam z jQuery, aby załadować obraz tła, który wypełnia szerokość / wysokość strony. Mam w głowie następujące:

$(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"
});

});

Działa to dobrze i można to zobaczyć na stronie http://projects.snowshtechnologies.com/golden_dragon/home/

Chcę, aby obraz BG zanikał z czernikolor tła. Przejrzałem kilka innych wątków na Stackie, które sugerują, że nie jest to możliwe jako element body zdefiniowany w css, ale w tym scenariuszu obraz BG jest ładowany przez jQuery. Jak miałbym dodawać wyciszenie do tego kodu, aby wprowadzić obraz z ładnym wyciszeniem?

Odpowiedzi:

możesz ustawić ciało background-color do black a następnie utwórz element taki jak div, ustaw go jako fixed i wtedy fade że w, element, który powinien wypełnić całą szerokość i wysokość okna przeglądarki.

Chciałbym po prostu utworzyć pojemnik na ciele o 100% szerokości i wysokości, aby wypełnić dostępne miejsce i, jeśli to konieczne, podać z-index aby ustawić go poniżej innych elementów. Następnie ustaw obraz tła kontenera w CSS i ustaw opacity: 0. Na koniec użyj jQuery fadeTo() aby przejść do 100% krycia.

Dzięki przejściom CSS3 możesz dodać rozjaśnienie obrazu tła. Dlatego jeśli dodasz następującą właściwość:

transition: background 0.5s;

Do div twojego ciała możesz dostać zanikanie dla przeglądarek, które go obsługują. Nie byłoby to jednak obsługiwane w przeglądarkach, które nie obsługują przejść CSS3.