我试图使用这个例子作为背景，但我似乎无法让它工作。
http://vincentgarreau.com/particles.js/#nasa
为了解决这个问题，我不得不使用-1500px的上限，只是为了将我的文本放在它的顶部，这会导致响应性出现重大问题。
有没有人知道如何严格地将它作为背景使用？
该插件的创建者已经在他的网站上完成了它。
您可以判断，因为当您检查它时，没有像在CodePen示例上那样悬停在顶部的“画布”。
我只是设法使用下一个css代码执行此操作，就像创建者在his nasa page中所做的那样：
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库生成的。
我之前遇到过这个问题并通过这样做修复它：
/* 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;
}
尝试在要放在particle.js前面的元素上使用overflow: hidden;属性;
#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;
}
试试这个：
#particle_background canvas{
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
你的身体有id =“particle_background”
你也可以像这样实现它
<body id="particles-js">
<div class="something">
<h1> something here </h1>
</div>
</body>
在css
.something {
z-index:1;
}
粒子的所有元素都放在背景中。希望有用。
在id="particles-js"中，只需将此代码添加到您的css：
position: fixed !important;
display: block;
您可以添加!important来覆盖以前的样式。