我正在尝试添加粒子。JS层在我主要的东西后面，例如我的按钮和文本在层前面，所以按钮可以点击/重定向。
这是我的JSFiddle现场演示，展示我的意思：
https://jsfiddle.net/c2qp3jkf/
<div id="particles-js"></div>
</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
<script src="particles.js">
</script>
```
我编辑了HTML部分；所有元素都必须在CCD_ 1容器内。
NOT：我压缩了它，因为我没有更改JavaScript和CSS部分。应用于页面的样式存在问题；如果你不能解决问题，你可以创建一个新问题。
particlesJS("particles-js",{particles:{number:{value:100,density:{enable:!0,value_area:800}},color:{value:"#ffffff"},shape:{type:"circle",stroke:{width:0,color:"#00ff00"},polygon:{nb_sides:5},image:{src:"img/github.svg",width:100,height:100}},opacity:{value:.5,random:!1,anim:{enable:!1,speed:1,opacity_min:.1,sync:!1}},size:{value:3,random:!0,anim:{enable:!1,speed:40,size_min:.1,sync:!1}},line_linked:{enable:!0,distance:150,color:"#ffffff",opacity:.4,width:1},move:{enable:!0,speed:4,direction:"none",random:!0,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:600,rotateY:1200}}},interactivity:{detect_on:"canvas",events:{onhover:{enable:!1,mode:"grab"},onclick:{enable:!1,mode:"push"},resize:!1},modes:{grab:{distance:140,line_linked:{opacity:1}},bubble:{distance:400,size:40,duration:2,opacity:8,speed:3},repulse:{distance:200,duration:.4},push:{particles_nb:5},remove:{particles_nb:2}}},retina_detect:!0});body{background-color:#fff;font-family:monospace}.border-button{border:solid 2.5px #000;transition:border-width .6s linear;border-radius:20px;background-color:transparent;padding:2px 7px;font-size:11px;cursor:pointer;display:inline-block}.btn:hover{background:rgba(238,238,238,0.48)}.fourofour{color:#000}.border-button{border:solid 2.5px #000;transition:border-width .4s linear}.border-button:hover{border-width:3.5px}*{margin:0;padding:0}body{background:#000}canvas{display:block}#particles-js{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}<!DOCTYPE html>
<html prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>arr3</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/x-icon" href="Darkheart_Gear.ico">
<meta property="og:title" content="arr3.ml" />
<meta property="og:url" content="https://www.arr3.gq" />
<meta property="og:image" content="https://www.arr3.ml/Darkheart_Gear.ico" />
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<style>body,html{margin:0;padding:0;width:100vw;height:100vh;background:linear-gradient(124deg,#ff2400,#e81d1d,#e8b71d,#e3e81d,#1de840,#1ddde8,#2b1de8,#dd00f3,#dd00f3);background-size:1800% 1800%;font-family:monospace;color:#000;image-rendering:pixelated;scrollbar-width:none;overflow:none;display:flex;justify-content:center;align-items:center;flex-direction:column;-webkit-animation:rainbow 18s ease infinite;-z-animation:rainbow 18s ease infinite;-o-animation:rainbow 18s ease infinite;animation:rainbow 18s ease infinite}::-webkit-scrollbar{display:none}iframe{width:100vw;height:100vh;border:none;margin:0;padding:0;display:block}@-webkit-keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}@-moz-keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}@-o-keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}@keyframes rainbow{0%{background-position:0 82%}50%{background-position:100% 19%}100%{background-position:0 82%}}h2{padding:1em 2em;margin:.25em}h5{padding:1em 2em;margin:.25em}.button-wrap{width:25%;display:flex;justify-content:space-around}</style>
</head>
<body>
<!-- All items must be inside the container below. -->
<div id="particles-js">
<section class="seperator-wrapper">
<div class="seperator gradient">
</div>
</section>
<h2 class="animate__animated animate__fadeInLeft" style="font-family:monospace; font-weight: 500;font-style: normal; text-align:center; color:Black">arr3</h2>
<h4 style="font-family:monospace; font weight: 500; font-style: normal; text-align:center; color:Black"> I love coding.</h4>
<br>
<button onclick="location.href = 'info.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Want to learn more?</button>
<br>
<div class="button-wrap">
<button onclick="location.href = 'mobydick.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">Read Moby Dick</button>
<br>
<button onclick="location.href = 'hmrkey.html'"
style="font-family:monospace; font-weight: 500; font-style: normal; text-align:center; color:black" class="border-button">HammerHead Key</button>
</div>
</div>
</body>将内容项放入容器<div>中，并将z-index设置为高于为粒子js<div>设置的z-index。