如何平滑过渡 CSS 背景图片？

主要的解决方案是：

“只需抛出一个加载屏幕，直到页面加载完毕”。

但我的目标是构建能够快速呈现基础知识的页面，无需加载屏幕，然后在图像和精美功能准备就绪时进行转换。所以我会等到它加载完毕，然后淡入。或者我会加载一个非常低分辨率的版本，然后在准备好时淡入高分辨率。

我还没有弄清楚这种做法的一个方面是如何使用背景图像来做到这一点。

如何实现背景图片平滑淡入的效果？

我愿意使用：

• JavaScript
• JQuery
• 任何现代 JQuery 库
• CSS 技巧/“黑客”

但我想避免：

• 使用覆盖元素并将其淡入顶部。

正如 @dandavis 的评论中所指出的，实际上有一个 CSS 过渡属性：background-image。

解决方案，利用 CSS 背景过渡属性：

1. 创建两个背景图像相同尺寸的：一种是透明的，一种是有意的。 （如果你不把它们做成相同的尺寸，你会得到这样的效果！ http://jsfiddle.net/9Nu7Z/8/);

2. use transition: background-image 1s造成过渡效果

3. 使用 Javascript 预加载图像并在准备好后重置背景图像。 CSS 会处理剩下的事情。

显着的局限性

• 这不允许background-size操纵（这会产生非常奇怪的效果 http://jsfiddle.net/9Nu7Z/1/).

• 如前所述，图像必须具有相同的尺寸。

工作示例 http://jsfiddle.net/9Nu7Z/7/

var image = new Image();
image.onload = function () {
        $(".element").css("background-image", "url('" + image.src + "')");
}

image.src = "https://c1.staticflickr.com/3/2439/3728897793_ff1c78c5d9.jpg"; //image to be transitioned to

html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
}
.element{
    width:100%;
    height:100%;
    background-image:url('http://i.imgur.com/HRV3DsM.jpg');
    -webkit-transition: background-image 5s;
}

<div class="element">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>