Question

我正在使用jQuery淡入我的主页，但它正在从白色渐渐消失。有没有办法从黑色页面淡入？这是加载iframe时的相同类型，它闪烁白色。我知道可以修复，所以我认为可能还有一个解决办法。

CSS：

html {
    background: black url(images/bg.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    display: none;
}
body {
    margin: 0;
    height: 100%;
    padding-left: 40px;
    padding-top: 25px;
}

脚本：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="home.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('html').fadeIn(3000);
    })
</script>
</head>
<body>
</body>
</html>

Answer 1

是的，请尝试将<body>更改为

<body><div id="page">Content here</div></body>

CSS到

html,body{background:#000; height: 100%}
#page{
    background: black url(images/bg.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    display: none;
}

和Javascript到

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

尚未经过测试，但可以为您效劳：）

jQuery fadeIn with Background Image

1 个答案: