Question

我使用particle.js作为背景。我已经设法使用z-index放置在后台。我在github isseus页面上尝试了一个建议。 z-index和这个：

"interactivity": {
    "detect_on": "canvas",

此位已添加到默认粒子配置中。

问题类似于：this question。他说他解决了它，但看着他的代码链接它看起来并不相同。粒子上面没有任何内容。

我的当前构建：Github 问题=交互性正好在第一个内容框的上方，就在它下方。我已尝试使用元素和z-index的宽度进行多次编辑。还尝试使用额外的div来获取其他内容。

如何让交互性在两侧发挥作用？

Answer 1

在你的html中试试这个

<div id="particles-js" style="position:fixed;width:100%;z-index:-10;"></div>

此外，如果您想在粒子在后台进行交互式控制

将互动设置为窗口，而不是 particles.json 文件中的画布

"interactivity": {
"detect_on": "window",

Answer 2

I exported from this codepen initially

然后我更改了他的css：

canvas {
width: 100%;
height:100%;
}

h1{
margin: 0 auto;
text-align: center;
width: 100%;
font-size: 2rem;
padding-top: 20rem;
font-weight: 200;
z-index: 2;
}

#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-colour: #000000;
z-index: -1 !important; 
}

在html中：

<body>
<div id="particles-js"></div>
<h1> My text for my overlay title </h1>

在导出的第73行附近的index.js中，将关于交互性的“ detect_on”部分从画布更改为窗口：

"detect_on": "window",

working example of above

other working code example上还有另一个Codepen集和正在运行的演示程序解决了相同的问题，但是您看到的其他选项较少，例如我将点更改为星形等的地方。

如何在其他元素下面保持particle.js的交互

2 个答案: