我使用 particles.js 作为我的背景，但粒子只跨越到窗口的大小，并在向下滚动时消失。
为了解决这个问题，我将 position: fixed; 添加到它的 css 选择器中。尽管粒子完全跨越了页面，但网页上的所有超链接都被停用了。为什么会这样？任何解决方法？
编辑: particles.js 的 Github 存储库 https://github.com/VincentGarreau/particles.js/
<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="site/js/app.js"></script>
CSS 实现:
#particles-js{
width: 100%;
height: 100%;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
JS文件请引用上述资源库。它实际上是 app.js 和 particles.js 在插件中完成主要工作。
最佳答案
我遇到了同样的问题，解决方法如下:
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>
为了使超链接起作用(与 particles.js 触摸事件一起)，我将类 mouseEvents 添加到我需要关注的元素(例如超链接、导航栏等)
CSS
.body-particles{
pointer-events: none;
}
.mouseEvents{
pointer-events: all;
}
关于html - 使用 particles.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45486736/