如何在我的元素中添加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

我假设你想要背景中的粒子画布？

您需要更改“粒子地面”的z-index，因为它会在您的内容区域上呈现。我会考虑调整你放置粒子地面代码的位置（在DOM中更高的自然更低的z-index，或者在更接近</body>标签的底部，并将z-index设置为0，使其在结构上更低的存在，同时仍然需要降低z-index。

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

（注意，你可以从你的z-index选择器中删除#particleground canvas。

如果您不希望中心部分为白色（上面的代码将执行此操作），您可以将其背景设置为透明，让画布通过它显示：

.et_pb_section_1 {
    background: transparent;
 }

如果你真的希望粒子“在顶部”由于某种原因，虽然我强烈建议反对它，你可以添加pointer-events: none;到#particleground - 阅读更多here