如何在其他元素下方保持particle.js交互答案

【问题标题】：How to keep the particles.js interaction while below other elements如何在其他元素下方保持particle.js交互
【发布时间】：2017-10-25 13:36:01
【问题描述】：

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

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

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

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

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

我怎样才能让交互性在两侧发挥作用？

【问题讨论】：

标签： javascript html css particle.js

【解决方案1】：

在你的 html 中试试这个

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

如果你想在粒子在后台时进行交互控制

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

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

【讨论】：

编辑：设置position:absolute;，同时设置height:100vh;
可以使用width: 100vw;来保持一致性。

【解决方案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

这里有另一个 codepen 集和工作演示解决了同样的问题 other working code example 但你会看到更少的其他选项来编辑我将点更改为星等的地方。

【讨论】：