gpt4 book ai didi

html - 使用 particles.js

转载 作者:行者123 更新时间:2023-11-28 03:15:48 27 4
gpt4 key购买 nike

我使用 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.jsparticles.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/

27 4 0
文章推荐: html - 除非内联,否则不应用样式表属性
文章推荐: 具有 3 列的 html 表格,最后一列宽度灵活。前两列以固定比例 25/75% 共享剩余空间
文章推荐: javascript - 为 jQuery 中动态创建的按钮提供不同的 ID
文章推荐: html - IE 绝对定位
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com