Particles.js 作为背景？ [关闭]答案

【问题标题】：Particles.js as a background? [closed]Particles.js 作为背景？ [关闭]
【发布时间】：2017-04-04 21:18:02
【问题描述】：

我正在尝试将此示例用作背景，但我似乎无法让它发挥作用。

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

为了解决这个问题，我不得不使用 -1500px 的边距顶部，只是为了将我的文本放在它的顶部，这会导致响应能力出现重大问题。

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

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

http://vincentgarreau.com/en

您可以判断，因为当您检查它时，没有像 CodePen 示例那样悬停在顶部的“画布”。

【问题讨论】：

它在 div 和 z-index: -10; 中
可以分享codepen的链接吗？
不幸的是，它不允许我分享 codepen 的链接。

标签： javascript html css particles

【解决方案1】：

我只是设法用下一个 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 库生成的。

Canvas creation code fragment

【讨论】：

应该标记为Accepted。完美运行。 CSSLint 抱怨 vertical-align 由于 display 被设置为 block 而被忽略。解决方案在没有 vertical-align 的情况下也可以工作。

【解决方案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;
}

【讨论】：

谢谢大佬，花了很多时间，终于成功了。

【解决方案3】：

尝试在要放在particles.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;
}

【讨论】：

【解决方案4】：

试试这个：

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

你的身体有 id="particle_background"

【讨论】：

【解决方案5】：

我一直在寻找相同的东西。现在我会第一个说我可能没有按照这里的说明做正确的事情，但我发现了这一点，它对我来说非常有效。

请参阅 Michael Van Den Berg 的 pen

#particles-js {
    width: 100%;
    height: 100%;
    background-color: #437993;
    /*background-image: url('');*/
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    
}

canvas {
    display: block;
    vertical-align: bottom;
}

<body>

  <div id="particles-js"></div>
  <div> @*Content you want to be in front goes here*@ </div>

<body>

【讨论】：

【解决方案6】：

如果您在 wordpress 网站 中使用粒子 js 并点击此链接： http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/

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

在这张图片中，搜索栏不起作用。所以，我给了

"z-index: 5"

到它。现在它工作正常。此外，粒子响应良好。

【讨论】：

【解决方案7】：

你也可以这样实现

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

在css中

.something {
 z-index:1;
}

particle-js 的所有元素都放在后台。希望有用。

【讨论】：

【解决方案8】：

在 id="particles-js" 中只需将此代码添加到您的 css 中：

position: fixed !important;
display: block;

您可以添加!important 来覆盖以前的样式。

【讨论】：