Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

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

Answer 1

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

body *{
   Position: absolute;
   z-index:1
}

#particles-js {
   position: absolute;
   width: 100%;
   height: 100px;
   z-index: 0 !important
}

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

Answer 2

将particle.js文件格式从github..go下载到链接

<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>

添加此行

<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>

你的HTML代码后进入正文.... 在下载的particle.js文件中，有一个名为[demo - ＆gt;的文件夹。 js - ＆gt; app.js]复制该文件和particle.js文件，将其文件位置打开app.js文件

particlesJS('orange',

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

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

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

2 个答案: