无法将particleground javascript作为div / section的背景

时间:2015-09-19 05:18:23

标签: javascript jquery html css

您好我正在尝试将我网站上特定div的背景作为粒子背景jquery背景 - http://jonathannicol.com/blog/2014/08/18/particleground-jquery-plugin-background-particle-systems/。我按照这里的步骤正确地复制了脚本,但是在div中的文本后面显示的背景,它在它上面形成了另一个div或部分。包括故障排除步骤在节声明之前添加一个div并给它ID =" particle",在节声明后添加一个div并给它ID =" particle"。同时制作每个div的z-index 1.以下是该部分的HTML:

<div id="particle">
<section class="container-fluid about">
    <div class="container parallax-window " data-parallax="scroll" data-image-src="/images/parallax.jpg" >
        <div class="row">
            <div class="col-md-12">
                <p>From concept to roll out, GM Motors...</p>
            </div>
        </div>
    </div>
</section>
</div>

这是CSS:

section.about {
  background-size: cover;
  background-color: #00a1de;
  padding-top: 80px;
  padding-bottom: 80px; }

帮助将不胜感激。

  section.about p {
    font-size: 26px;
    line-height: 1.5em;
    color: white;
    margin: 0;
    text-align: center;
    font-weight: 300; }

1 个答案:

答案 0 :(得分:0)

在这里,我为您正在寻找的 particleground 效果创建了JSFiddle

通过对 CSS 进行细微更改,您可以轻松实现:

section.about {
     position: absolute;
     left: 0;
     top: 50%;
     padding: 0 20px;
     width: 100%;
     text-align: center;
 }

自从读取你的que后,我开始意识到你正在使用 bootstrap ,所以我还添加了 bootstrap 库来检查 particleground <是否支持< / em>与否。

请看一下。它会为你做到这一点。