javascript - 无法获取 particleground javascript 作为 div/部分的背景

Question

您好，我正在尝试让我网站上特定 div 的背景成为 particleground 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; }

Answer 1

我在这里创建了一个 JSFiddle用于您正在寻找的粒子地面效果。

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

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

自从阅读了你的问题后，我开始意识到你正在使用 bootstrap 所以我还添加了 bootstrap 库来检查它是否被 particleground< 支持/em> 或不。

请看。它会为您解决问题。