particle.js 没有覆盖整个页面
Posted
技术标签:
【中文标题】particle.js 没有覆盖整个页面【英文标题】：particles.js not covering entire page 【发布时间】：2018-01-06 09:51:09 【问题描述】：我正在尝试使用particles.js 作为背景，但我无法将画布设置为全尺寸背景。
我尝试了至少 10 种针对类似问题的不同解决方案，但都没有奏效。 画布始终作为具有宽高比的元素作为屏幕的结果，但在调整大小时它不会整体覆盖它。 令人上瘾的是，它不会设置为背景，而是设置为身体的子元素，位于其余元素之上或之下。
我尽可能地简化了代码，问题仍然存在。
Example of the problem
<!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 可以从之前发布的车主网站下载。 我正在使用他们目前的主题
感谢您的帮助
【问题讨论】：
【参考方案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 的解决方法：将类 mouseEvents 添加到我需要关注的元素（例如，导航栏等）
CSS
.body-particles
pointer-events: none;
.mouseEvents
pointer-events: all;
但是，如果有人知道一种更好的方法来将事件同时保存在前层和后层中，那就太好了
【讨论】：
如果你不想在页面的其余部分使用粒子js，试试position: sticky;【参考方案2】：
我只需要这样做......
HTML：
<body>
<div id="particles-js"></div>
...
</body>
CSS：
#particles-js
height: 100%;
width: 100%;
position: fixed;
z-index: -100;
【讨论】：
【参考方案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 属性。如果您想要的是与实际内容一起滚动的背景，请尝试将particles-js id 的位置元素更改为绝对。我认为这应该让你在球场上。
【讨论】：
仍然是同样的问题.. 已经尝试了至少 30 种不同的设置，比如使用位置、z-indexes 和各种属性，但没有人能解决这个问题。我总是以相同的结果结束，也复制这个 css，应用你的实际内容容器类并尝试以某种方式修改它以维护你的整体想法：/ @NicolaZaltron: Risa__B suggests 更改canvas 和 #particles-js 以使用 width: 100vw; height: 100vh 而不是 100%。我发布这个是因为那个用户还没有comment privileges。
@tom 还是一样，同样使用 vw 和 vh 是我的第一次尝试，但没有修复它。【参考方案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;
【讨论】：
【参考方案5】：嗨，我可能来得太晚了，但这就是我解决将粒子作为背景的方法只是一个 css 修复
#particles
height: 100%;
width: 100%;
position: absolute;
background-color: red;
z-index: -1;
canvas
position: fixed;
【讨论】：
以上是关于particle.js 没有覆盖整个页面的主要内容，如果未能解决你的问题，请参考以下文章