particles-js 没有覆盖整个页面答案

【问题标题】：particles-js does not cover the whole pageparticles-js 没有覆盖整个页面
【发布时间】：2020-04-29 09:50:06
【问题描述】：

我对particles-js 有一些问题，首先，它没有覆盖整个页面。其次，由于某种原因，我无法与粒子交互。

这是 HTML 的代码：

        <script type="text/javascript" src="js/particles.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>  

And this is my css for particles-js: 
            #particles-js{
        position : absolute;
        width:100%;
        height:100%;
        z-index:-1;
        background-image: url(gfx/testback.png);
}


  [1]: https://i.stack.imgur.com/XO6w5.png

【问题讨论】：

父容器的标记和样式是什么？
我不确定你的意思，我是 html 和 css 的新手。但是，如果我认为正确，这就是您所要求的： * { margin: 0px;填充：0px； }
这是我整个网站的 div #container{ width: 100%;高度：100%； }
% 仅适用于在父级上设置了明确高度的元素。如果您将标题设置为 100vh（或 1080px 等），那么粒子应该填充空间。
如果添加链接或codepen，会更容易提供帮助。 z 索引是我怀疑你无法交互的原因......

标签： javascript html css particles.js

【解决方案1】：

像我的网站一样，用粒子 js 覆盖所有页面真的很容易：https://askianoor.ir 您应该添加一个高度为 100 的 div

编辑版本：

<body>
   <div class="h-100">
       <!-- PARTICLES-->
       <div id="particles-js">
           <div class="position-absolute w-100">
              Place your text here !
           </div>
       </div>
   </div>
</body>

在 CSS 中：

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-image: url(gfx/testback.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

【讨论】：

您好，通过您的示例，粒子位于所有内容的顶部，因此文本不可见
只需为您的文本 div 类添加“position-absolute”即可处理！