Particles.js 仅作为特定部分的背景

Posted 2023-03-06

【中文标题】Particles.js 仅作为特定部分的背景

【英文标题】：Particles.js as a background for only a specific section

【发布时间】：2017-12-19 10:35:07

【问题描述】：

我正在使用 Vincent Garreau 的 Particles.js（可以链接但不能共享多个链接）在我网站的特定部分实现粒子效果背景。

<div id="particles-js" >

<section class="page-section features" >
<div class="container relative" >
     <div class=" font-alt hs-line-2 mb-30">
     <!-- Other relevant code for this section -->
     </div>
     </div> <!--end container div-->
     </section>
</div> <!-- End particles div>

CSS

#particles-js 
  background-color: #000;
  position: absolute;
  z-index: 50;
  width: 100%;
  height: 100%;
  top: 0;


.page-section 
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 90px 0;

“特征”类没有样式规则。

但是，这是该代码的输出：http://imgur.com/a/Ce9Sh（图 1）

粒子 div 位于功能部分下方。没有设置为背景。

为粒子 div 设置一个 position: absolute 或 fixed 会完全破坏特征部分的布局，因为特征部分出现在许多其他元素之后。

在粒子 div 上设置一个固定位置，顶部和左右有边距，使功能永久固定在屏幕上，我无法向下滚动过去。

绝对搞砸了 features 部分的定位，particle.js 仍然不可见。

这是我在粒子 div 上设置 position: absolute 标记时的样子：http://imgur.com/a/Ce9Sh (img2)

我想要的只是粒子显示在功能部分的后面，而不是单独显示在它下面。

我们将不胜感激。

【问题讨论】：

也许给特征一个透明的背景和一个黑色的粒子？

不起作用。试过了。

【参考方案1】：

我遇到了同样的问题！我所做的基本上是将particle.js设置为固定背景：

view.html

<div id="particles-js" class="animation_background"></div>
<section>
...
...
</section>

styles.css.scss

.animation_background 
  background-color: #08090d;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0; 

然后我必须为所有其他高于 0 的元素设置 z-index，使其位于背景之上。由于性能原因，此解决方案并不完美，但它会给您带来您想要的效果！