如何将来自particle.js 的粒子放置在我的内容后面？

Question

我正在尝试将来自particle.js 的粒子动画放在我的div 后面。我尝试将所有内容放在#particles-js div 中，并更改内容和#particles-js 的z-index。这是 HTML 的外观：<div id="particles-js">        <header>            <h1>Vibe!</h1>            <h2>Outwit your friends</h2>        </header>        <div class="main">            <div class="container">                <p>What should we call you?</p>                <input class="input input-lg"type="text">                <button class="btn btn-lg">Join</button>                <button class="btn btn-lg">Create</button>            </div>        </div>    </div> 我的 CSS 也有很多position: absolute标签，这可能是原因吗？JSFiddle：https ://jsfiddle.net/j305exgy/

Answer 1

您缺少粒子 json 文件。

JS：

particlesJS("particles-js", {

  "particles": {

    "number": {

      "value": 380,

      "density": {

        "enable": true,

        "value_area": 800

      }

    },

    "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.5,

      "random": false,

      "anim": {

        "enable": false,

        "speed": 1,

        "opacity_min": 0.1,

        "sync": false

      }

    },

    "size": {

      "value": 3,

      "random": true,

      "anim": {

        "enable": false,

        "speed": 40,

        "size_min": 0.1,

        "sync": false

      }

    },

    "line_linked": {

      "enable": true,

      "distance": 150,

      "color": "#ffffff",

      "opacity": 0.4,

      "width": 1

    },

    "move": {

      "enable": true,

      "speed": 6,

      "direction": "none",

      "random": false,

      "straight": false,

      "out_mode": "out",

      "bounce": false,

      "attract": {

        "enable": false,

        "rotateX": 600,

        "rotateY": 1200

      }

    }

  },

  "interactivity": {

    "detect_on": "canvas",

    "events": {

      "onhover": {

        "enable": true,

        "mode": "grab"

      },

      "onclick": {

        "enable": true,

        "mode": "push"

      },

      "resize": true

    },

    "modes": {

      "grab": {

        "distance": 140,

        "line_linked": {

          "opacity": 1

        }

      },

      "bubble": {

        "distance": 400,

        "size": 40,

        "duration": 2,

        "opacity": 8,

        "speed": 3

      },

      "repulse": {

        "distance": 200,

        "duration": 0.4

      },

      "push": {

        "particles_nb": 4

      },

      "remove": {

        "particles_nb": 2

      }

    }

  },

  "retina_detect": true

});

CSS

#particles-js {

  position: fixed;

  width: 100%;

  height: 100%;

  background-color: #ccc;

  background-size: cover;

  background-position: 50% 50%;

}

HTML：

<div id="particles-js"></div>

工作示例：jsfiddle.net/7aLnpkoh

Answer 2

您缺少 z-index: -1;

#particles-js {

     position: absolute;

     left: 0px;

     top: 0px;

     z-index: -1;

    }