如何使頁面加載時使用css淡入背景圖片？

-3

你好，我想通過使用所有的CSS，如果可能的話，在背景圖像淡入我的網站。當用戶訪問主頁時，我希望圖像淡入。我遇到問題了，除非我必須添加jQuery或JavaScript才能這樣做。這裏是我的代碼：如何使頁面加載時使用css淡入背景圖片？

<!doctype html> 
<html> 
<head> 
<title>Paradox Entertainment</title> 

<meta charset="utf-8" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<style type="text/css"> 



body { 
    margin:0; 
    font-family:arial,helvetica,sans-serif; 

    background-image:url("images/2_petski.jpg"); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-color:#000000; 
    color: #ffffff; 
    padding: 350px; 


} 

ul { 
     list-style: none 

} 



</style> 

</head> 


<body> 






</body> 
</html>

謝謝你在前進，如果我能得到任何形式的資源或代碼幫助。

來源

2015-06-20 user2627437

http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load –

身體是空的！我們不是在這裏爲你寫代碼！ –

我不希望你爲我的身體@PraveenKumar編寫代碼。我正在尋找一個函數或一個可能的CSS方法。 – user2627437

使用相同的代碼，我想你可以做Pure CSS。下面的小提琴爲你工作嗎？您可以使用計時功能來更改延遲。目前它是4秒。

.fadeImage { 
 
    -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */ 
 
     -moz-animation: fadein 4s; /* Firefox < 16 */ 
 
     -ms-animation: fadein 4s; /* Internet Explorer */ 
 
     -o-animation: fadein 4s; /* Opera < 12.1 */ 
 
      animation: fadein 4s; 
 
    display: block; 
 
    margin: 25px auto; 
 
} 
 

 
@keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
} 
 

 
/* Firefox < 16 */ 
 
@-moz-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
} 
 

 
/* Safari, Chrome and Opera > 12.1 */ 
 
@-webkit-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
} 
 

 
/* Internet Explorer */ 
 
@-ms-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
} 
 

 
/* Opera < 12.1 */ 
 
@-o-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
}

<img src="http://lorempixel.com/400/200/" alt="Image" class="fadeImage" />

來源

2015-06-20 23:14:44

非常感謝您的來源先生。非常感激。 – user2627437

@ user2627437這就是我所說的。我沒有做太多的事情來尋找好友！ :) –

如何使頁面加載時使用css淡入背景圖片？

回答

相關問題