Particles.js 作为背景？ [关闭]
Posted
技术标签:
【中文标题】Particles.js 作为背景？ [关闭]【英文标题】：Particles.js as a background? [closed] 【发布时间】：2017-04-04 21:18:02 【问题描述】：我正在尝试将此示例用作背景，但我似乎无法让它发挥作用。
http://vincentgarreau.com/particles.js/#nasa
为了解决这个问题，我不得不使用 -1500px 的边距顶部，只是为了将我的文本放在它的顶部，这会导致响应能力出现重大问题。
有没有人知道如何严格使用它作为背景？
插件的创建者在他的网站上已经完成了。
http://vincentgarreau.com/en
您可以判断，因为当您检查它时，没有像 CodePen 示例那样悬停在顶部的“画布”。
【问题讨论】：
它在div 和 z-index: -10; 中
可以分享codepen的链接吗？
不幸的是，它不允许我分享 codepen 的链接。
【参考方案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 来覆盖以前的样式。
【讨论】：
以上是关于Particles.js 作为背景？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章