Particles.js 背景未调整

问题描述

当我为 Particles.js 调整我的配置时，背景颜色/图像并没有改变。我不确定我做错了什么。这是我的代码：

HTML：

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="js/app.js"></script>
<script>
    particlesJS.load('particles-js','particles.json',function(){
        console.log('particles.json loaded...')
    })
</script>
</div>

CSS：

head{
    background-color: gray;
}
body{
    background-color: gray;
}

Particles.json：

{
  "particles": {
    "number": {
      "value": 80,"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": 5,"random": true,"speed": 40,"size_min": 0.1,"line_linked": {
      "enable": true,"distance": 150,"color": "#ffffff","opacity": 0.4,"width": 1
    },"move": {
      "enable": true,"speed": 6,"direction": "none","straight": false,"out_mode": "out","attract": {
        "enable": false,"rotateX": 600,"rotateY": 1200
      }
    }
  },"interactivity": {
    "detect_on": "canvas","events": {
      "onhover": {
        "enable": true,"mode": "repulse"
      },"onclick": {
        "enable": true,"mode": "push"
      },"resize": true
    },"modes": {
      "grab": {
        "distance": 400,"line_linked": {
          "opacity": 1
        }
      },"bubble": {
        "distance": 400,"size": 40,"duration": 2,"opacity": 8,"speed": 3
      },"repulse": {
        "distance": 200
      },"push": {
        "particles_nb": 4
      },"remove": {
        "particles_nb": 2
      }
    }
  },"retina_detect": true,"config_demo": {
    "hide_card": false,"background_color": "#646570","background_image": "https://images.unsplash.com/photo-1579546929662-711aa81148cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fdb8MHxleHBsb3JlLWZlZWR8Mnx8fGVufdb8fHx8&w=1000&q=80","background_position": "50% 50%","background_repeat": "no-repeat","background_size": "cover"
  }
}

我为背景尝试了各种十六进制代码，但没有将其从红色更改。我不确定它从哪里得到红色，但它是红色的...Background of website

解决方法

particlesJS("particles-js",{
    "particles": {
        "number": {
            "value": 80,"density": {
                "enable": true,"value_area": 800
            }
        },"color": {
            "value": "#ff0000"
        },"shape": {
            "type": "circle","stroke": {
                "width": 0,"color": "#000000"
            },"polygon": {
                "nb_sides": 5
            },"image": {
                "src": "img/github.svg","width": 100,"height": 100
            }
        },"opacity": {
            "value": 1,"random": true,"anim": {
                "enable": false,"speed": 1,"opacity_min": 0.1,"sync": false
            }
        },"size": {
            "value": 3,"speed": 40,"size_min": 0.1,"line_linked": {
            "enable": true,"distance": 150,"color": "#104723","opacity": 0.4,"width": 1
        },"move": {
            "enable": true,"speed": 5,"direction": "none","random": false,"straight": false,"out_mode": "out","bounce": false,"attract": {
                "enable": false,"rotateX": 600,"rotateY": 1200
            }
        }
    },"interactivity": {
        "detect_on": "window","events": {
            "onhover": {
                "enable": true,"mode": "repulse"
            },"onclick": {
                "enable": true,"mode": "push"
            },"resize": true
        },"modes": {
            "grab": {
                "distance": 400,"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
});

 #particles-js{
     position:absolute;
     width: 100%;
     height: 100%;
     z-index:-1;
     background-color: #ffffff;
     background-image: url("");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50% 50%;
}

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>

我注意到的两件事。您没有在 HTML 中指定 js-particles div。您有一个没有初始 div 标签的结束 div 标签。在 <body> 标记之前，创建一个

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

然后你可以像在我的代码片段中一样改变你的 CSS，以及在脚本标签内的粒子函数中使用 JSON，而不是导入 JSON 文件