无法获取particleground javascript作为div / section的背景 [英] Unable to get particleground javascript as background for div/section

问题描述

您好我试图获得我的网站上的一个特定的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：

Hi I am trying to get the background of a specific div on my website to be the particleground jquery background - http://jonathannicol.com/blog/2014/08/18/particleground-jquery-plugin-background-particle-systems/ . I followed the steps from here and copied the script correctly, but instead of the background showing up behind the text in a div, it forms another div or section right above it. Troubleshooting steps included; adding a div before the section declaration and giving it the ID="particle", adding a div after the section declaration and giving it the ID="particle". Also making the z-index of each of these divs 1. Here is the HTML for the section :

<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; }

推荐答案

http://jsfiddle.net/vivekkupadhyay/s8t47o5e =nofollow> JSFiddle 您要查找的 particleground 效果。

Here I've created a JSFiddle for the particleground effect you're seeking.

通过稍微更改 CSS ，您可以轻松实现：

By making a slight change in your CSS you can easily achieve that:

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

读取你的队列后，我发现你在使用引导，所以我还添加了引导库以检查是否受到 支持。

Since reading your que I came to realize that you're using bootstrap so I've also added bootstrap library to check it is supported by particleground or not.

请看看。它会为你做的伎俩。

Please have a look. It will do the trick for you.

这篇关于无法获取particleground javascript作为div / section的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！