如何淡入背景圖片？

我想要一個圖像預加載並在準備就緒時淡入。我有預加載程序工作，但無法獲得淡入淡出效果。如何淡入背景圖片？

我試了一下：

1：CSS3過渡 - 的背景圖片不能正常工作。

2：jQuery fadeIn - 只適用於HTML元素而不適用於CSS背景圖像。嘗試淡化元素會導致所有元素也在淡化。

的jQuery：

$(bg).imagesLoaded({ 
    done: function($images){ 
     $('body').css('background-image', "url('" + $images[0].src + "')");

CSS：

body{ 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-size:cover; 
}

據我所知，有可能無法實現這一目標的一個圓滑的方式，但我已經看到它在這裏完成，例如因此必須有辦法：http://movies.io/m/4I/en。

2012-11-09 DominicM

是否必須是一個背景圖像？有什麼理由不能只使用img元素？你可以用css轉換做btw – alimac83

你可以創建一個單獨的元素並影響整個元素，而不是把背景圖像放在主體上。 – Chad

這是您給出的鏈接上的背景圖像，因此它必須是具有黑色背景色的另一個元素，並且一旦圖像加載後它就會淡出。 – Archer

在我用了一個更優雅的解決方案，並不需要額外的div元素結束。

這裏發生的事情是，當圖像加載完成後，background-image css將添加jquery，並且將body color設置爲white的類將消失。希望對某人有幫助！

的jQuery（在圖像加載功能）

$('body').css('background-image', "url('" + $images[0].src + "')"); 
$('#wrapper').removeClass("bgFade", 700);

CSS：

.bgFade{ 
    background-color:#FFF; 
}

2012-11-24 15:55:05 DominicM

可以應該做這樣的事情

<div> <-- the block 
    <div class="background"> 
    </div> 
    <div class="content"> 
    ... 
    </div> 
</div>

使用的位置是：絕對的，放。內容在系統技術領域股利。蘋果淡入到.background。當你需要div中的不透明背景時也使用這個。

2012-11-09 17:54:24 Greg

閱讀[this]（http://www.sitepoint.com/css-center-position-absolute-div/）用於集中絕對定位的元素或使用一些javascript – Greg

如果你真的需要背景圖片的解決方案，然後創建元素，它們設置背景圖片，這樣的事情：

background-image: url('http://placekitten.com/200/300');<br>

然後動畫使用jQuery的單個元素。

這裏是示範小提琴：
http://jsfiddle.net/robertp/6rXjs/3/embedded/result/

乾杯，
羅布

2012-11-09 18:20:01 robertp

回答