5

我正在尝试使用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 可以从之前发布的车主网站下载。我正在使用他们现在的主题

谢谢你的帮助

4

5 回答 5

12

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

CSS

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

.mouseEvents{
  pointer-events: all;
}

但是，如果有人知道一种更好的方法来保持前后层的事件，那就太好了

于 2017-07-31T10:55:05.197 回答
5

我只需要这样做...

HTML：

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

CSS：

#particles-js {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -100;
}
于 2019-01-23T15:15:38.373 回答
0

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

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 的位置元素更改为绝对。我认为这应该让你在球场上。

于 2017-07-31T00:40:29.433 回答
0

嗨，我可能来得太晚了，但这就是我解决将粒子作为背景的方法只是一个 CSS 修复

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

canvas {
  position: fixed;
}

于 2021-11-08T21:59:20.950 回答
0 
- 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;
}
于 2018-04-03T10:24:32.730 回答