如何淡化背景图片？

Question

我希望图像在准备好时预先加载并淡入。我有预加载器工作，但无法获得淡入淡出效果。

我尝试了什么：

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。

Answer 1

如果你真的需要背景图像解决方案，那么创建元素，在它们上设置背景图像，如下所示：

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

然后使用jQuery为各个元素设置动画。

这是一个示范小提琴：
http://jsfiddle.net/robertp/6rXjs/3/embedded/result/

干杯，
罗布

Answer 2

你可以做这样的事情

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

使用position：absolute，将.content放在.background div上。苹果淡入.background。当你需要div中的不透明背景时也可以使用它。

Answer 3

最后，我使用了一个更优雅的解决方案，不需要额外的div元素。

这里发生的是当图像加载完背景图像时，将使用jquery添加css，并将将颜色设置为白色的类消失。希望它对某人有帮助！

jQuery :(在图片加载函数中）

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

CSS：

.bgFade{
    background-color:#FFF;
}