如何将块级内容放在particle-js之上

Question

我正在尝试使用particles.js作为我网页的背景。我见过的所有例子都将粒子作为整个网页的背景（页面上没有滚动）。但是，我只想将粒子作为页面标题的背景（使用bootstrap 4）：

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div id="particles-js"></div>

<!-- section 1: should have particles as background -->
<div class="py-5 text-center text-light bg-primary">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center my-5">
        <h1>header content...</h1>
      </div>
    </div>
  </div>
</div>

<!-- section 2: should not have particles as background -->
<div class="py-5 text-center text-light bg-secondary">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center my-5">
        <h1>other content...</h1>
      </div>
    </div>
  </div>
</div>

现在，粒子在两个部分之上，但在所有文本，按钮，图像等之后。如何使粒子完全落后于第2部分？我已经尝试将第2部分的z-index设置为9999但是该部分仍然可以看到粒子。

这可能不是最好的方法，但我尝试过的其他方法都没有。将第1部分和particle-js高度设置为百分比在大屏幕上运行良好，但是当屏幕高度较小时，第1部分中文本中的文本将悬停在第2部分中。设置时，某些设备上会出现同样的问题。高度到精确的像素值。将内容直接放在particle-js div中也不能很好地工作。

在不影响响应性的情况下获得第2部分后面的粒子的任何解决方案都会很棒。

Answer 1

从github..go下载qazxsw poi文件到链接

particle.js

添加这一行

<div id="particles-js">
 <div class="py-5 text-center text-light bg-primary">
   <div class="container">
     <div class="row">
       <div class="col-md-12 text-center my-5">
         <h1>header content...</h1>
       </div>
     </div>
   </div>
 </div>
</div>

在你的html代码之后进入正文....在下载的particle.js文件里面有一个名为[demo - > js - > app.js]的文件夹复制该文件和particle.js文件把它放到你的文件位置打开app.js文件

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="particles.js"></script>
    <script type="text/javascript" src="app.js"></script>

上面的橙色部分输入你自己的id --- particle-js ----任何问题都评论我

Answer 2

如果你有一个固定的标题，让我们说100px你可以使用以下的CSS

particlesJS('orange',

  {
    "particles": {
      "number": {
        "value": 200,
        "density": {
          "enable": true,
          "value_area": 800
        }
      }, 

这会将您网站上的所有元素向前推送1层，而不是正文，而粒子-js则设置回图层位置0，从而将其设置为背景。