javascript - 添加 JavaScript 背景效果如何禁用元素中的控件？

Question

首先，这里有一个指向我正在处理的页面的链接，因此您可以明白我的意思: http://37.60.224.20/~mdg17761/mirzarasic.com/about-me/

还有，这里是后台效果的链接: https://github.com/jnicol/particleground

如果您转到该页面，您会注意到您无法滚动中间的部分。该网站链接也不可点击，您无法选择任何文本。

我也在使用带有 Divi 主题的 Wordpress 来构建网站。我在代码模块中添加了创建背景的代码，它看起来像这样:

<script>
document.addEventListener("DOMContentLoaded", function() {
    particleground(document.getElementById("particleground"), {
        dotColor: &#039;#ffffff&#039;,
        lineColor: &#039;#blue&#039;,
        particleRadius: 0
    });
    var intro = document.getElementById(&#039;intro&#039;);
    intro.style.marginTop = -intro.offsetHeight / 2 + &#039;px&#039;;
}, false);
</script>

<style>
#particleground {
    position: relative;
}
#particleground canvas {
    position: absolute;
    z-index: 996;
    opacity: 0.2;
}
</style>

删除代码模块会使整个部分重新工作。我一直在查看插件的源代码，但是，我对 JavaScript 的经验不足，无法弄清楚是什么原因造成的。

Answer 1

我假设您想要背景中的粒子 Canvas ？

您需要更改“粒子地面”的 z-index，因为它呈现在您的内容区域之上。我会考虑调整放置粒子地面代码的位置(在 DOM 中较高的位置以获得自然较低的 z-index ，或者在靠近 </body> 标签的底部并将 z-index 设置为 0 给出它在结构上较低，但仍需要降低 z-index。

#particleground {
    position: relative;
    z-index: 0;
}

(请注意，使用此选项，您可以从 z-index 选择器中删除 #particleground canvas。

如果你不希望中心部分是白色的(上面的代码会这样做)，你可以将它的背景设置为透明，让 Canvas 透过它显示:

.et_pb_section_1 {
    background: transparent;
 }

如果出于某种原因你真的想要粒子“在顶部”，而我强烈建议不要这样做，你可以添加 pointer-events: none;至 #particleground - 阅读更多 here