Javascript 如何平滑过渡CSS背景图像？

目前的主要解决方案是：

“只需向上弹出一个加载屏幕，直到页面加载”

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

这个实践的一个方面，我还没有弄清楚，就是如何使用背景图像

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

我愿意使用：

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

但我想避免：

• 使用覆盖元素并在顶部淡入该元素

---

不清楚您是否已经解决了此问题：对于常规的

图像，在其上方放置另一个

（显示：内联块；可见性：隐藏；）并收听高分辨率图像的加载将起作用：

$（“高分辨率”）.load（函数（）{
$（this.css（{visibility:“hidden”，opacity:0}）.fadeIn（“slow”）；
}

编辑：另一种方法（将高分辨率放在低分辨率后面，然后淡出低分辨率）也可以。但是你不能绕过叠加的东西

---

CSS背景图像中的淡入淡出是不可能的。它们没有不透明度值。你唯一能做的就是将内容放在

的上方，并以同样的方式淡入淡出。

正如@dandavis在评论中指出的，实际上有一个CSS转换属性：背景图像

该解决方案利用CSS背景转换属性：

创建两个大小相同的背景图像：：一个是透明的，另一个是预期的（如果没有使它们大小相同，）

使用

过渡：背景图像1s

产生过渡效果

使用Javascript预加载图像，并在准备好后重置背景图像。CSS将处理其余部分

显著的局限性

• 这不允许

  背景大小

  操作（）

• 如前所述，图像的大小必须相同

---

var image=newimage（）；
image.onload=函数（）{
$（“.element”）.css（“背景图像”，“url”（“+image.src+”）”）；
}
image.src=”https://c1.staticflickr.com/3/2439/3728897793_ff1c78c5d9.jpg“；//要转换到的图像

html{
宽度：100%；
身高：100%；
}
身体{
宽度：100%；
身高：100%；
填充：0px；
边际：0px；
}
.元素{
宽度：100%；
身高：100%；
背景图像：url（'http://i.imgur.com/HRV3DsM.jpg');
-webkit过渡：背景图像5s；
}

---

我想我有一个解决方案了！（对不起，我很激动，我成功了：）

//库（缩小）
this.BgImgFader=function（）{var styleRules；function getArray（str）{if（str.indexOf（'，'）==0）{str.substring（1）；}if（str.lastIndexOf（'，'）==str.length-1）{str str substring（0，str.length-1）；}if（str indexOf（'，'））=-1）{var选择器=[str string=[str else]；else{var选择器=str split string（'，'）；}？我希望如此。@Goran_Mandictransition-property:background image；@dandavis它不会转换不透明度，是吗？..？等等。如果它这么简单，这些家伙就不会建议黑客了。@jt0dd：我不知道细节，我很惊讶它能工作！（我在评论之前在chrome上做了测试）.这对我来说是新的。从低雷诺数到高雷诺数，或者从半决赛到决赛，这似乎是理想的选择透明png到常规背景图像。当我从一个小图像到一个持续时间为3000毫秒的大图像时，重复的图像慢慢增长…可能需要背景大小等其他道具才能看起来恰到好处，但它看起来很有希望发表评论…为什么不让dandavis回答而不是自己发布一个呢？@Zachsauier在通讯中说nts，dandavis提示其他用户测试其解决方案，而不是发布答案。因此，我继续进行测试，将结果作为答案发布。我是dandavis，我批准此答案。我不关心integer stack的DB在我的行上有什么内容…我从您的答案中删除了一些不必要的部分。如果您有任何问题或评论，我将我想看看这个库背后的目的是什么，例如它提供了什么优势。否则，我想出的解决方案也只是几行JS，不需要库。你已经有了一个解决方案：O一定错过了，我最后看到的是一个过渡I法师，你称之为“相当诡异”。为什么仍然没有被标记为正确的答案？好吧，看看我的解决方案的两个限制。我更喜欢选择最好的一个，因此我问你是否解决了这两个问题？（我把我学到的作为一个答案，这就是我所说的“我的解决方案”，这多亏了@dandavisNo的评论，我的解决方案没有这些限制，正如你在帖子中看到的，我实际上已经在那里设置了背景大小。而且，由于不需要填充图像，你的第二个问题甚至没有发挥作用。（虽然如果我将
背景重复：无重复；
添加到您的解决方案中，似乎我可以很好地控制大小。不过，我不知道您到底想对图像做什么，如果无重复允许的话）