我想要预加载图像并在准备就绪时淡入。我有预加载器工作但无法获得淡入淡出效果。
我尝试过的:
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 .
最佳答案
如果你真的需要背景图片解决方案,那么创建元素,在它们上面设置背景图片,像这样:
background-image: url('http://placekitten.com/200/300');<br>
然后使用 jQuery 为各个元素设置动画。
这是一个演示 fiddle :
http://jsfiddle.net/robertp/6rXjs/3/embedded/result/
干杯,
罗布
关于jquery - 如何淡入背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13313082/