如何在其他元素下方时保持particles.js 交互

Question

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

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

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

问题类似于：这个问题。他说他解决了，但看他的 codepen 链接似乎不一样。颗粒上面没有内容。

我的当前版本：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",