2

我正在使用以下方法将背景图像附加到 body 元素：

<script>
$(document).ready(function(){

    $("body").css( "background" , "url(someimage.jpg)");

});
</script>

这很好，但是背景图像非常大，我想在它们完全加载后使用淡入淡出（）或其他东西淡化它们。但是，我似乎找不到使用 jQuery 或 javascript 执行此操作的方法。有吗？有什么聪明的建议吗？如果有帮助，我可以导入 jquery-ui 库。

所以要清楚，我需要发生的事情是这样的：

页面加载 -> 图像完成加载 -> 图像淡入为 body 元素的背景图像

4

2 回答 2

0

好的，我想通了，但这是重复的，因为我不建议@am（重复问题）。

摆弄我的解决方案：http: //jsfiddle.net/kRjrn/8/

HTML

<body>
    <div id="background">.
    </div>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>    
</body>​

javascript

$(document).ready(function(){
    $('#background').animate({ opacity: 1 }, 3000);
});​

CSS

#background {
    background-image: url("http://media.noupe.com//uploads/2009/10/wallpaper-pattern.jpg");
    opacity: 0;
    margin: 0;
    padding: 0;
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
}​
于 2012-06-15T14:27:48.497 回答
-1

信不信由你，jQuery 不支持渐变背景色！但别担心......有一个插件！

“原始”背景褪色插件是这个：

https://github.com/jquery/jquery-color

我也刚找到这个：

http://www.bitstorm.org/jquery/color-animation/

于 2012-06-15T12:44:22.477 回答