背景图像褪色问题

我在我的页面正文上使用了fadeIn效果，但是有一个特定的页面，我在该图像的正文标签中包含了一个大的背景图像，但是它不会褪色，这会破坏效果。我怎样才能做到呢?这是我当前的代码。

 $(document).ready(function() {
    $("body").css("display", "none");
    $("body").fadeIn(3000);
});  
 body{
    background: #ffffff url("../images/test.jpg") no-repeat;
    z-index: -2;
}

我不认为这是可能褪色的<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/

edit:有趣的是，body标签的CONTENT可以褪色，但它不会作用于body标签上的任何CSS背景。示例如下:http://jsfiddle.net/Fxvdz/

这样修改你的代码

$(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;
}

相关内容

最新更新

热门标签：