小编Nic*_*ron的帖子

particle.js没有覆盖整个页面

我正在尝试将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>
Run Code Online (Sandbox Code Playgroud)

的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;
}
Run Code Online (Sandbox Code Playgroud)

可以从之前发布的所有者的网站上下载APP.JS和PARTICLES.JS。我正在使用他们目前的主题

谢谢你的帮助

html javascript css particles particles.js

3
推荐指数
2
解决办法
5087
查看次数

标签 统计

css ×1

html ×1

javascript ×1

particles ×1

particles.js ×1