Particles.js作为背景？

Question

我试图使用这个例子作为背景,但我似乎无法让它工作.

http://vincentgarreau.com/particles.js/#nasa

为了解决这个问题,我不得不使用-1500px的上限,只是将我的文本放在它的顶部,这会导致响应性方面的重大问题.

有没有人知道如何严格地将它作为背景使用？

该插件的创建者已经在他的网站上完成了它.

http://vincentgarreau.com/en

您可以判断,因为当您检查它时,没有像在CodePen示例上那样悬停在顶部的"画布".

Answer 1

我只是设法使用下一个css代码执行此操作,就像创建者在他的nasa页面中所做的那样:

body,
html {
    height: 100%
}

#particles-js canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0
}

然后我<div id="particles-js"></div>在身体开口标签后面写了.请注意,您无法看到canvas类,因为它是由particles.js库生成的.

画布创建代码片段

Answer 2

我之前遇到过这个问题并通过这样做修复它:

/* to show the canvas bounds and remove scrollbars caused by it, if applicable */
canvas {
    display:block;
    background: rgb(33,36,50);
    position: fixed;
    z-index: -1;
}

然后为您的内容创建一个div/main元素并将其添加到其中:

mainElementNameHere {
    position: absolute;
}

Answer 3

尝试overflow: hidden;在要放在particle.js前面的元素处使用该属性;

#main-section {
    overflow: hidden;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    opacity: 0.48;
}