jquery - 如何淡入背景图像？

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。

score 1 · Accepted Answer

如果您确实需要背景图像解决方案，则创建元素，在其上设置背景图像，如下所示：

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

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

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

干杯，
罗伯

score 0 · Accepted Answer

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

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

jQuery：（在图像加载函数中）

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

CSS：

.bgFade{
    background-color:#FFF;
}

score 0 · Accepted Answer

你可以做这样的事情

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

使用 position:absolute，将 .content 放在 .background div 上。和苹果淡入到.background。当您需要 div 中的不透明背景时，也可以使用此方法。

3 回答 3