Question

我正在尝试使用particles.js 作为背景，但我无法将画布设置为全尺寸背景。

我尝试过至少10种不同的解决方案，但没有任何效果。画布总是作为具有宽高比的元素作为屏幕，但在调整大小时它不会覆盖它作为整体。在成瘾中，它不会被设置为背景，而是作为身体的孩子，超出或低于其余元素。

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

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

好的，我终于解决了背景问题：这就是我管理它的方式（我很确定我已经尝试了但是如果最终工作的话重新构建整个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添加到我需要关注的元素（例如，navbar等）

CSS

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

.mouseEvents{
  pointer-events: all;
}

然而，如果有人知道更好的方法来保持前后层的事件

，那就太好了

Answer 2

我只需要这样做...

HTML：

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

CSS：

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

Answer 3

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

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属性。如果你想要的是一个与实际内容一起滚动的背景，请尝试将粒子-js id的position元素更改为absolute。我认为这应该让你进入球场。

Answer 4

- 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分配了类面板。

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

particles.js没有覆盖整个页面

4 个答案: