Particles.js配置修改后背景色与背景图不生效问题咨询

问题根因及修复方案 #

1. 无效配置字段问题
   你当前把背景相关配置放在了config_demo字段下，该字段是particles.js官方演示页面专属的自定义字段，particles.js核心库本身不会读取该字段下的配置，自然不会生效。你需要将背景相关配置移动到JSON的根层级，和particles、interactivity字段平级。

2. 容器样式缺失问题
   你没有为#particles-js容器设置基础样式，粒子画布无法正常铺满页面作为背景展示，需要补充对应的CSS规则。

3. 冗余错误CSS规则
   你为head标签设置background-color完全无效，head是页面元信息容器，不会渲染为可视元素。同时要注意排查是否有其他引入的CSS文件优先级更高，覆盖了body或粒子容器的背景设置。

4. 配置加载校验
   打开浏览器控制台查看是否有particles.json的404报错，同时确认是否输出了你写的particles.json loaded...日志，如果没有输出说明配置文件加载失败，库会默认使用内置配置。

修复后的代码示例 #

补充CSS规则

body {
  margin: 0;
  padding: 0;
  background-color: gray;
}
#particles-js {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; /* 确保粒子层在页面内容下方作为背景 */
}

修正后的particles.json结构（仅展示调整部分，原有粒子、交互配置保留不变）

{
  "particles": {
    // 你原有粒子相关配置保持不变
  },
  "interactivity": {
    // 你原有交互相关配置保持不变
  },
  "retina_detect": true,
  // 背景配置移到根层级
  "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"
}

红色背景排查方法 #

打开浏览器开发者工具（按F12），切换到元素面板，选中<body>标签或者#particles-js容器，在右侧「计算样式」栏找到background-color属性，点击属性旁的跳转链接即可直接定位到设置该红色的CSS代码位置。

内容的提问来源于stack exchange，提问作者Josh Sero