1

我正在尝试使用particles.js作为我网页的背景。我见过的所有示例都将粒子作为整个网页的背景（页面上没有滚动）。但是，我只希望粒子作为页眉的背景（使用引导程序 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，但该部分中的粒子仍然可见。

这可能不是最好的方法，但我尝试过的其他方法也没有奏效。将 section 1 和particles-js height 设置为百分比在大屏幕上效果很好，但是当屏幕高度较小时，section 1 中的文本会悬停在 section 2 中。在某些设备上设置高度到精确的像素值。将内容直接放在particles-js div 中也效果不佳。

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

4

2 回答 2

1

从github下载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>

添加此行

<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 -> js -> app.js] 的文件夹复制该文件和particle.js 文件将它放在你的文件位置打开app.js文件

particlesJS('orange',

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

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

于 2018-02-26T02:39:27.083 回答
0

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

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

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

这会将您网站上的所有元素向前推 1 层，但 body 除外，而particle-js 被设置回第 0 层位置，从而将其设置为背景。

于 2018-02-26T02:38:05.480 回答