Question

我在我的页面正文中使用了淡入淡出效果，但是有一个特殊的页面有一个大的背景图像，我已经将其包含在该图像的正文标记中，但它不会消失，这会破坏效果。我怎样才能实现这一目标？这是我目前的代码..

 $(document).ready(function() {
    $("body").css("display", "none");
    $("body").fadeIn(3000);
});  

 body{
    background: #ffffff url("../images/test.jpg") no-repeat;
    z-index: -2;
}

Answer 1

我认为淡入淡出<body>是不可能的 - 解决方法是将所有内容都包装在容器中，然后在其上设置图像。

HTML：

<body><div id="container">**all your site content goes here**</div></body>

JS：

$(document).ready(function() {
    $('#container').hide().fadeIn(3000);
});

小提琴： http://jsfiddle.net/ztXnZ/2/

编辑：有趣的是，正文标记的内容可以褪色，但它不会对正文标记上的任何CSS背景起作用。在此演示：http://jsfiddle.net/Fxvdz/

Answer 2

以这种方式修改代码

$(document).ready(function() {
    $("body").css("display", "none");
    $("body").addClass("body1").fadeIn(3000);
});

创建此CSS类

.body1 {
    background: #ffffff url("../images/test.jpg") no-repeat;
    z-index: -2;
}

背景图片淡入淡出问题

2 个答案: