2013-04-26 199 views
1

我正在使用jQuery淡入我的主頁,但它目前從白色漸變。有沒有辦法從黑屏中淡入?當加載一個iframe並且它閃爍白色時,這是同樣的事情。我知道這是可以修復的,所以我認爲這也可能是一個解決方案。jQuery淡入背景圖片

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> 

回答

3

是的,請嘗試更改<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); 
}) 

沒有帶測試,但可能會爲你工作:)

+0

這只是做同樣的事情,完全與白色閃光。 – pianoman 2013-04-26 21:59:16

+0

再試一次,我更新了一些CSS – Ejaz 2013-04-26 22:00:41