关于particles-js的两类问题：无法铺满全屏及无法交互求助

Hey there! Let's work through those two particles-js problems you're dealing with—getting the particles to cover the whole page, and enabling mouse interactions with them.

Problem 1: Particles aren't covering the entire page #

The issue here is likely related to how your parent elements (html and body) are sized. Your #particles-js uses position: absolute, which bases its width/height on its parent's dimensions. By default, html and body don't stretch to fill the full viewport height.

Fix: #

Update your CSS to ensure the root elements take up the full viewport, and tweak the particle container's positioning for better consistency:

/* Make html/body fill the entire viewport */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Optional: Prevents unwanted scrollbars */
}

#particles-js{
  position: fixed; /* Fixes the container to the viewport */
  width: 100vw; /* Full viewport width */
  height: 100vh; /* Full viewport height */
  z-index: 0; /* Adjust this so particles can receive mouse events */
  background-image: url(gfx/testback.png);
  background-size: cover; /* Ensures your background image also covers the screen */
  background-position: center;
}

Problem 2: Can't interact with particles #

There are two common culprits here:

1. The z-index: -1 on your particle container pushes it behind all other elements, so mouse events can't reach it.
2. Your app.js configuration might have interactive features disabled.

Fixes: #

1. Adjust z-index: As shown in the CSS above, set z-index: 0 for #particles-js. If you have content that needs to sit on top of the particles, just give that content a higher z-index (like z-index: 1)—this won't block particle interactions.
2. Enable interactivity in app.js: Make sure your particlesJS configuration includes enabled interactive events. Here's a working example snippet:

particlesJS('particles-js', {
  "particles": {
    // Add your existing particle style settings here (color, size, etc.)
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "size": {
      "value": 3
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true, // Turn on hover interactions
        "mode": "grab" // Choose an interaction mode: grab, bubble, repulse, etc.
      },
      "onclick": {
        "enable": true, // Turn on click interactions
        "mode": "push" // Choose a click mode: push, remove, bubble, etc.
      },
      "resize": true // Auto-adjust particles when the window resizes
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "push": {
        "particles_nb": 4
      }
    }
  },
  "retina_detect": true
});

After making these changes, your particles should fill the entire page and respond to mouse hovers/clicks!

内容的提问来源于stack exchange，提问作者Jakub Kopacz