如何淡入背景图片？

我想要一个图像预加载并在准备就绪时淡入。我有预加载程序工作，但无法获得淡入淡出效果。如何淡入背景图片？

我试了一下：

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

回答