Particle JS - 覆盖整页

如何解决Particle JS - 覆盖整页

我已经在附加的链接上实现了 Particle JS。它应该包含在横幅中，然后在它下面将是带有标题文本“hello there”的白色背景。出于某种原因，particle.js 效果占据了整个页面的背景。有人知道如何阻止吗？

https://codepen.io/mattrees92/pen/vYmKvNo

particlesJS("particles-js",{
  "particles": {
    "number": {
      "value": 355,"density": {
        "enable": true,"value_area": 789.1476416322727
      }
    },"color": {
      "value": "#ffffff"
    },"shape": {
      "type": "circle","stroke": {
        "width": 0,"color": "#000000"
      },"polygon": {
        "nb_sides": 5
      },"image": {
        "src": "img/github.svg","width": 100,"height": 100
      }
    },"opacity": {
      "value": 0.48927153781200905,"random": false,"anim": {
        "enable": true,"speed": 0.2,"opacity_min": 0,"sync": false
      }
    },"size": {
      "value": 2,"random": true,"speed": 2,"size_min": 0,"line_linked": {
      "enable": false,"distance": 150,"color": "#ffffff","opacity": 0.4,"width": 1
    },"move": {
      "enable": true,"direction": "none","straight": false,"out_mode": "out","bounce": false,"attract": {
        "enable": false,"rotateX": 600,"rotateY": 1200
      }
    }
  },"interactivity": {
    "detect_on": "canvas","events": {
      "onhover": {
        "enable": true,"mode": "bubble"
      },"onclick": {
        "enable": true,"mode": "push"
      },"resize": true
    },"modes": {
      "grab": {
        "distance": 400,"line_linked": {
          "opacity": 1
        }
      },"bubble": {
        "distance": 83.91608391608392,"size": 1,"duration": 3,"opacity": 1,"speed": 3
      },"repulse": {
        "distance": 200,"duration": 0.4
      },"push": {
        "particles_nb": 4
      },"remove": {
        "particles_nb": 2
      }
    }
  },"retina_detect": true
});

html,body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

header {
    width: 100%;
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background-size: cover;
}

#particles-js canvas {
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: black;
    background-size: cover;
}


.container {
    flex-wrap: wrap;
}

h1 {
    width: 100%;
    font-family: 'Montserrat',sans-serif;
    font-weight: 900;
    font-size: 72px;
}

h2 {
    font-family: 'Montserrat',sans-serif;
    font-weight: 300;
    font-size: 24px;
}

.btn-primary {
    font-size: 1.25rem;
    font-family: 'Montserrat',sans-serif;
    font-weight: 400;
    display: inline-block;
    padding: 0.5em 1em;
    margin-top: 1em;
    color: #EB429C;
    background-color: transparent;
    border: #EB429C 0.125em solid;
    cursor: pointer;
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),0 0 0.45em currentColor;
    Box-shadow: inset 0 0 0.5em 0 #EB429C,0 0 0.5em 0 #EB429C;
    position: relative;
    transition: background-color 100ms linear;
}

.btn-primary::before {
    pointer-events: none;
    content: '';
    position: absolute;
    background: #EB429C;
    top: 120%;
    left: 0;
    width: 100%;
    height: 100%;

    transform: perspective(1em) rotateX(40deg) scale(1,0.35);
    filter: blur(1.5em);
    opacity: 0.25;

}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    Box-shadow: 0 0 1em 0.5em #EB429C;
    opacity: 0;
    transition: opacity 100ms linear;
}

.btn-primary:hover,.btn-primary:focus {
    color: black;
    background-color: #EB429C;
    border: #EB429C 0.125em solid;
    text-shadow: none;
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:hover::after {
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<header>
  <div id="particles-js">
    <div class="container">
      <h1> Test bed </h1>
      <h2>Sub text to go here</h2>
      <button class="btn-primary"> CONTACT US </button>
    </div>
  </div>
</header>

<div class="container">
  <h1>Hello there</h1>
</div>

解决方法

#particles-js canvas (absolute) 需要 relative 到 header。

header {
    position: relative;
    ...
}