2014-10-22 153 views
0

所以我有一個基本的網站,全尺寸,固定的CSS背景設置。我想在我的整個站點(包括文本)的頂部實施rainyday.js。如何獲取rainyday.js使用CSS背景圖像作爲背景?

目前,我所能做的最好的事情是讓rainyday.js在頂部覆蓋另一個背景圖像,並在該小部分下雨。它正在創造另一個「背景」並使用它。

看來這是可能的here,但我不明白你應該怎麼做。

This is the rainy day code.

謝謝!

HTML:

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta content="text/html; charset=utf-8" http-equiv="content-type"> 

    <title>Safe House</title> 

    <link href="index.css" rel="stylesheet"> 

</head> 



<body> 


    <div id="yes"> 
     <div id="maindiv"> 
      Safe House 
     </div> 

     <div id="secondarydiv"> 
      <p>noun</p> 

      <p>1.</p> 

      <p>a dwelling or building whose conventional appearance makes it a 
      safe or</p> 

      <p>inconspicuous place for hiding, taking refuge, or carrying on 
      clandestine activities.</p> 
     </div> 
    </div> 
</body> 
</html> 

CSS:

@import url(http://fonts.googleapis.com/css?family=Coming+Soon); 


#maindiv { 
     text-align: center; 
     font-family: 'Coming Soon', sans-serif; 
     font-style: italic; 
     color: white; 
     text-transform: uppercase; 
     font-size: 10em; 
     font-weight: 700; 
     text-transform: uppercase; 
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); 
} 

#secondarydiv{ 

    font-family: 'Coming Soon', sans-serif; 
     font-style: italic; 
     color: rgba(255, 255, 255, 0.7); 
     text-transform: uppercase; 
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); 
     font-size: 1.5em; /*font size of main headings*/ 
     font-weight: 700; 
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); 
     margin-left: 300px; 
} 

#yes { 
    margin-top: 150px; 
} 


body { 
    background: url("images/bg.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

p { 
    margin: 0; 


} 

回答