Javascript Particles.js作为背景？_Javascript_Html_Css_Particles

Javascript Particles.js作为背景？

javascript html css

Javascript Particles.js作为背景？,javascript,html,css,particles,Javascript,Html,Css,Particles,我试图用这个例子作为背景，但我似乎无法让它发挥作用为了避免这个问题，我不得不使用-1500px的页边空白，只是把我的文本放在页边空白处，这导致了响应性方面的重大问题有人知道我怎样才能严格地把它作为背景吗插件的创建者已经在他的网站上完成了这项工作您可以分辨出来，因为当您检查它时，没有“画布”像CodePen示例中那样悬停在顶部。我以前遇到过这个问题，并通过执行以下操作修复了它： /* to show the canvas bounds and remove scrollbars cau

我试图用这个例子作为背景，但我似乎无法让它发挥作用

为了避免这个问题，我不得不使用-1500px的页边空白，只是把我的文本放在页边空白处，这导致了响应性方面的重大问题

有人知道我怎样才能严格地把它作为背景吗

插件的创建者已经在他的网站上完成了这项工作

您可以分辨出来，因为当您检查它时，没有“画布”像CodePen示例中那样悬停在顶部。

我以前遇到过这个问题，并通过执行以下操作修复了它：

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

您也可以这样实现它

<body id="particles-js">
 <div class="something">
  <h1> something here </h1>
 </div>
</body>

粒子js的所有元素都放置在背景中。

希望有用。

我刚刚在下一个css代码中做到了这一点，就像创建者在：

然后我在body-open标签后面写了

。请注意，您无法看到canvas类，因为它是由particles.js库生成的

尝试使用

溢出：隐藏property
#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;
}

在id=“particles js”
中，只需将此代码添加到css中：
position: fixed !important;
display: block;

您可以添加！重要信息
，以替代以前的样式
 试试这个：
#particle_background canvas{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}

如果你的身体有id=“particle\u background”
我一直在寻找相同的。现在我会第一个说，我可能没有按照上面的说明做正确的事情，但是我发现了这一点，它对我非常有效
看到迈克尔·范·登·伯格的作品了吗

#粒子js{
宽度：100%；
身高：100%；
背景色：#437993；
/*背景图像：url（“”）*/
背景尺寸：封面；
背景位置：50%50%；
背景重复：无重复；
位置：绝对位置；
}
帆布{
显示：块；
垂直对齐：底部对齐；
}

@*你想在前面的内容放在这里*@
如果您在wordpress网站上使用particle js，并遵循以下链接：

然后，您可能会注意到移动粒子位于您的内容上方，在这种情况下，只需给内容（它可以是列/行、按钮或输入字段）一个“z-index:5（或更多）”

在这张图片中，搜索栏不起作用。所以，我给了
“z指数：5”
去吧。现在它工作得很好。此外，粒子反应良好。
它位于div
中，z指数为-10

您可以共享指向代码笔的链接吗？很遗憾，它不允许我共享指向代码笔的链接。应标记为

已接受。工作完美无瑕。投诉由于显示
设置为块
而忽略了垂直对齐。解决方案在没有垂直对齐的情况下也能工作。谢谢你，在花了很多时间之后，终于可以工作了。
position: fixed !important;
display: block;

#particle_background canvas{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}