如何淡入背景图像？答案

【问题标题】：How to fade in background image?如何淡入背景图像？
【发布时间】：2012-11-09 17:34:43
【问题描述】：

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

我尝试了什么：

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。

【问题讨论】：

必须是背景图片吗？有什么理由不能只使用 img 元素吗？您可以使用 css 转换 btw 来做到这一点
您可以创建一个单独的元素并影响整个元素，而不是在主体上放置背景图像。
那是你给的链接上的背景图片，所以它必须是另一个具有黑色背景颜色的元素，并且一旦加载图像就会淡出。
@alimac83 好吧，在示例中使用了站点背景图像，所以既然可以这样做，我宁愿这样做，而不是在 html 中添加额外的元素。不过，如果 img 有一个不错的解决方案而无需进行重大权衡，那么我会使用它。
在这种情况下，请看这里：mightymeta.co.uk/…

【解决方案1】：

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

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

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

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

干杯，
抢

【讨论】：

【解决方案2】：

你可以这样做

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

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

【讨论】：

【解决方案3】：

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

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

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

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

CSS：

.bgFade{
    background-color:#FFF;
}

【讨论】：