如何将来自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", {&nbsp; "particles": {&nbsp; &nbsp; "number": {&nbsp; &nbsp; &nbsp; "value": 380,&nbsp; &nbsp; &nbsp; "density": {&nbsp; &nbsp; &nbsp; &nbsp; "enable": true,&nbsp; &nbsp; &nbsp; &nbsp; "value_area": 800&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; "color": {&nbsp; &nbsp; &nbsp; "value": "#ffffff"&nbsp; &nbsp; },&nbsp; &nbsp; "shape": {&nbsp; &nbsp; &nbsp; "type": "circle",&nbsp; &nbsp; &nbsp; "stroke": {&nbsp; &nbsp; &nbsp; &nbsp; "width": 0,&nbsp; &nbsp; &nbsp; &nbsp; "color": "#000000"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; "polygon": {&nbsp; &nbsp; &nbsp; &nbsp; "nb_sides": 5&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; "image": {&nbsp; &nbsp; &nbsp; &nbsp; "src": "img/github.svg",&nbsp; &nbsp; &nbsp; &nbsp; "width": 100,&nbsp; &nbsp; &nbsp; &nbsp; "height": 100&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; "opacity": {&nbsp; &nbsp; &nbsp; "value": 0.5,&nbsp; &nbsp; &nbsp; "random": false,&nbsp; &nbsp; &nbsp; "anim": {&nbsp; &nbsp; &nbsp; &nbsp; "enable": false,&nbsp; &nbsp; &nbsp; &nbsp; "speed": 1,&nbsp; &nbsp; &nbsp; &nbsp; "opacity_min": 0.1,&nbsp; &nbsp; &nbsp; &nbsp; "sync": false&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; "size": {&nbsp; &nbsp; &nbsp; "value": 3,&nbsp; &nbsp; &nbsp; "random": true,&nbsp; &nbsp; &nbsp; "anim": {&nbsp; &nbsp; &nbsp; &nbsp; "enable": false,&nbsp; &nbsp; &nbsp; &nbsp; "speed": 40,&nbsp; &nbsp; &nbsp; &nbsp; "size_min": 0.1,&nbsp; &nbsp; &nbsp; &nbsp; "sync": false&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; "line_linked": {&nbsp; &nbsp; &nbsp; "enable": true,&nbsp; &nbsp; &nbsp; "distance": 150,&nbsp; &nbsp; &nbsp; "color": "#ffffff",&nbsp; &nbsp; &nbsp; "opacity": 0.4,&nbsp; &nbsp; &nbsp; "width": 1&nbsp; &nbsp; },&nbsp; &nbsp; "move": {&nbsp; &nbsp; &nbsp; "enable": true,&nbsp; &nbsp; &nbsp; "speed": 6,&nbsp; &nbsp; &nbsp; "direction": "none",&nbsp; &nbsp; &nbsp; "random": false,&nbsp; &nbsp; &nbsp; "straight": false,&nbsp; &nbsp; &nbsp; "out_mode": "out",&nbsp; &nbsp; &nbsp; "bounce": false,&nbsp; &nbsp; &nbsp; "attract": {&nbsp; &nbsp; &nbsp; &nbsp; "enable": false,&nbsp; &nbsp; &nbsp; &nbsp; "rotateX": 600,&nbsp; &nbsp; &nbsp; &nbsp; "rotateY": 1200&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; "interactivity": {&nbsp; &nbsp; "detect_on": "canvas",&nbsp; &nbsp; "events": {&nbsp; &nbsp; &nbsp; "onhover": {&nbsp; &nbsp; &nbsp; &nbsp; "enable": true,&nbsp; &nbsp; &nbsp; &nbsp; "mode": "grab"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; "onclick": {&nbsp; &nbsp; &nbsp; &nbsp; "enable": true,&nbsp; &nbsp; &nbsp; &nbsp; "mode": "push"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; "resize": true&nbsp; &nbsp; },&nbsp; &nbsp; "modes": {&nbsp; &nbsp; &nbsp; "grab": {&nbsp; &nbsp; &nbsp; &nbsp; "distance": 140,&nbsp; &nbsp; &nbsp; &nbsp; "line_linked": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "opacity": 1&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; "bubble": {&nbsp; &nbsp; &nbsp; &nbsp; "distance": 400,&nbsp; &nbsp; &nbsp; &nbsp; "size": 40,&nbsp; &nbsp; &nbsp; &nbsp; "duration": 2,&nbsp; &nbsp; &nbsp; &nbsp; "opacity": 8,&nbsp; &nbsp; &nbsp; &nbsp; "speed": 3&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; "repulse": {&nbsp; &nbsp; &nbsp; &nbsp; "distance": 200,&nbsp; &nbsp; &nbsp; &nbsp; "duration": 0.4&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; "push": {&nbsp; &nbsp; &nbsp; &nbsp; "particles_nb": 4&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; "remove": {&nbsp; &nbsp; &nbsp; &nbsp; "particles_nb": 2&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; "retina_detect": true});CSS#particles-js {&nbsp; position: fixed;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; background-color: #ccc;&nbsp; background-size: cover;&nbsp; background-position: 50% 50%;}HTML：<div id="particles-js"></div>工作示例：jsfiddle.net/7aLnpkoh

Answer 2

您缺少 z-index: -1;#particles-js {&nbsp; &nbsp; &nbsp;position: absolute;&nbsp; &nbsp; &nbsp;left: 0px;&nbsp; &nbsp; &nbsp;top: 0px;&nbsp; &nbsp; &nbsp;z-index: -1;&nbsp; &nbsp; }