particles.js 未覆盖整个页面

Question

我正在尝试使用 particles.js 作为背景，但我无法将 canvas 设置为 full-size 背景。

我针对类似问题尝试了至少 10 种不同的解决方案，但均无效果。 canvas 始终作为具有 width-height 比率的元素作为屏幕结果，但在调整大小时它不会作为一个整体覆盖它。上瘾时，它不会设置为背景，而是设置为 body 的 child，高于或低于其余元素。

我尽可能地简化了代码，但问题仍然存在。

Example of the problem

HTML

<!DOCTYPE HTML>

<html>
    <head>
        <title>Try</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" media="screen" href="css/style.css">
    </head>

    <body>
        <div id="particles-js"></div>
        <div>
            <p>Something here</p>
        </div>
    </body>

    <script src="assets/js/particles.js"></script>
    <script src="assets/js/app.js"></script>
</html>

CSS

canvas{
  display:block;
  vertical-align:bottom;
  position: absolute;
}

/* ---- particles.js container ---- */

#particles-js{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  top: 0;
}

APP.JS和PARTICLES.JS可以在楼主之前贴的网站上下载。我正在使用他们目前使用的主题

感谢您的帮助

Answer 1

假设您正在尝试模仿示例页面，我会这样做：

body: {
  padding: 0px;
  margin: 0px;
}

canvas{
  width: 100%;
  height: 100%;
}

/* ---- particles.js container ---- */

#particles-js{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 0;
  top: 0px;
  left: 0px;
  background-color: #b61924;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.actual-content-container
{
   z-index: 100;
   /* whatever other style properties you want.  Apply this class to the div or other element you put your actual content in.*/
}

演示页面基本上就是这样做的。关键是 z-index 属性。如果您想要的是随实际内容滚动的背景，请尝试将 particles-js id 的 position 元素更改为 absolute。我认为这应该让你进入球场。

Answer 2

好的，我终于解决了背景问题：这就是我管理它的方式（我很确定我已经尝试过但重新构建整个 html 如果最终成功的话）

CSS

#particles-js{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #000;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.body-particles{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

HTML

<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- SOME CSSs HERE -->

        <link rel="stylesheet" media="screen" href="assets/css/particles.css">

         <!-- SOME SCRIPTS HERE -->
    </head>
    <body>
        <div class="body-particles">

        <!-- Wrapper -->
            <div id="wrapper">
                <!-- MY STUFF HERE, STYLED WITH MY CSS -->
            </div>
        </div>

        <!-- particles.js container -->
        <div id="particles-js"></div>

        <!-- scripts -->
        <script src="assets/js/particles.js"></script>
        <script src="assets/js/app.js"></script>

    </body>
</html>

现在，我遇到了一个新问题：被设置为底层，它没有捕捉到指针事件。一旦我让它工作，我会更新答案。

显然，如果您有任何建议，请随时提供帮助。

更新：mouseEvents 的解决方法：将 class mouseEvents 添加到我需要关注的元素（例如，导航栏等）

CSS

.body-particles{
  pointer-events: none;
}

.mouseEvents{
  pointer-events: all;
}

但是，如果有人知道更好的方法来将事件保存在前层和后层，那就太好了

Answer 3

- Set positions fixed for #particles-js container

#particles-js{
   position:fixed;
   width: 100%;
   height: 100%;
   background: linear-gradient(to right, rgb(52, 152, 219), rgb(44, 62, 80));
   background-repeat: repeat;
   background-size: cover;
}

- 为包含内容的 div 分配了 class 面板。

.panel{
   position: absolute;
   margin-top: 5%;
   margin-bottom: 5%;
   margin-left: auto;
   margin-right: auto;
   left: 50;
   right: 50;
}

Answer 4

我只需要这样做...

HTML:

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

CSS:

#particles-js {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -100;
}

Answer 5

嗨，我在这里可能来不及了，但这就是我解决将粒子作为背景的方法只是 css 修复

#particles {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: red;
  z-index: -1;
}

canvas {
  position: fixed;
}

particles.js 未覆盖整个页面

particles.js not covering entire page

html

javascript

css

particles

particles.js