javascript - 如何在低于其他元素时保持 particles.js 交互

Question

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

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

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

问题类似于:this question .他说他解决了，但看他的 codepen 链接似乎不一样。粒子上方没有内容。

我的当前版本:Github 问题 = 交互性仅在第一个内容框上方和下方起作用。 我已经尝试使用元素宽度和 z-index 进行多次编辑。还尝试为其他内容使用额外的 div。

我怎样才能使交互性在侧面发挥作用？

Answer 1

在你的 html 中试试这个

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

此外，如果您希望在粒子处于背景时进行交互式控制

在 particles.json 文件中将 interactivity 设置为 window 而不是 canvas

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