如何让rainyday.js使用CSS背景图片作为背景?

时间:2014-10-22 06:21:21

标签: javascript jquery html css

所以我有一个基本的网站,其中包含CSS的全尺寸固定背景设置。我想在我的整个网站(包括文本)的所有内容的顶部实现rainyday.js。

目前,我能做的最好的事情就是让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;


}

1 个答案:

答案 0 :(得分:0)

作者仍在努力,请参阅https://github.com/maroslaw/rainyday.js/issues/95,您可以在该问题单中与其他人讨论,甚至加入进度以添加此功能!