Question

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

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

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

这是我的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>

jumbotron的CSS以及particle-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 ...
}

在全屏div上叠加particle.js

1 个答案: