javascript - 在全屏 div 上覆盖 particles.js

Question

我正在使用以下 .js 插件:

https://github.com/VincentGarreau/particles.js/

使用 bootstrap 3 的 jumbotron，我已经让插件正常工作，当你进入我的主页时我的 jumbotron 是全屏的(我认为这是问题)我试图在我的 jumbotron 下运行 particles.js 但由于某种原因粒子在我的超大屏幕下方生成一个完整的视口(viewport)。就像它是在我的超大屏幕单元之后在它自己的 DIV 中设置的，但我有 <div id="particles-js"></div>缠绕在我的超大屏幕 DIV 上。这就是我迷路的地方，我设置它的方式应该显示在我的超大屏幕内容和所有内容的下方。

这是我的 HTML:

<div id="particles-js">
    <div class="jumbotron">
        <div class="container center-vertically">
            <div class="col-lg-6 col-lg-offset-3 text-center">
                <h1>
                    A template with a bit of a different <strong>look &amp; feel</strong>.
                </h1>
                <hr>
                <p>Particles is a fun and multipurpose template, with clean &amp; modern design <i>+</i>&nbsp; code.</p>
            </div>
        </div>
    </div>
</div>

超大屏幕的 CSS 以及 particles-js ID:

.jumbotron { 
    height: 100%;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    padding-top: 79px;
    padding-bottom: 0;
    display: table;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background: #6819e8; /* Old browsers */
    background: -moz-linear-gradient(left, #6819e8 0%, #7437d0 35%, #615fde 68%, #6980f2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6819e8', endColorstr='#6980f2',GradientType=1 ); /* IE6-9 */ 
}

.center-vertically {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

我还上传了一个实时版本，这样更容易查看问题:

http://aliensix.com/company/

Answer 1

我认为您需要做的是让您的 #particles-js 成为 .jumbotron 的子级。

#particles-js 需要相对于 .jumbotron 绝对定位。

HTML

<div class="jumbotron">
    <div id="particles-js"></div>
</div>

CSS

.jumbotron {
    position: relative;
    // Other style rules ...
}