如何基于背景视频颜色实现particles.js粒子颜色反转？

我来帮你搞定这个问题！要让背景视频在particles.js粒子下方清晰可见，通过反转粒子颜色形成视觉对比是非常有效的方法，下面提供两种可行的实现思路，你可以根据需求选择：

方法一：使用CSS滤镜快速实现全局颜色反转 #

这种方法最简单，不需要修改particles.js的核心配置，直接通过CSS滤镜让粒子容器的颜色反转，自动和背景视频形成对比：

1. 先确保你的HTML结构中，视频作为底层背景，particles容器在视频上方：

<div class="video-container">
  <video src="your-video-source.mp4" autoplay loop muted playsinline></video>
  <div id="particles-js"></div>
</div>

2. 添加对应的CSS样式，给粒子容器应用反转滤镜：

.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* 视频在底层 */
}

#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 粒子在视频上方 */
  filter: invert(1); /* 核心：反转粒子颜色 */
  /* 可选：如果反转后对比度不够，可以调整亮度/对比度 */
  /* filter: invert(1) brightness(1.2) contrast(1.1); */
}

方法二：手动修改particles.js配置文件 #

如果你需要更精准地控制粒子颜色，直接修改particles的配置参数，设置与视频主色调相反的颜色：

1. 找到你的particles配置文件（通常是particles.json），修改color字段：

{
  "particles": {
    "color": {
      "value": "#000000" /* 如果原粒子是白色(#ffffff)，改为黑色实现反转；反之则改为白色 */
    },
    // 其他粒子配置（形状、大小、运动等）保持不变
  },
  "interactivity": {
    // 交互配置保持不变
  }
}

2. 如果视频的色调不固定，你还可以设置多组对比色让粒子随机显示，增强适配性：

"color": {
  "value": ["#000000", "#222222", "#1a1a1a"] /* 深色系，适配亮色背景视频 */
}

进阶方案：动态颜色反转（适配任意视频色调） #

如果需要粒子颜色自动跟随视频背景实时反转，需要结合Canvas API获取视频像素数据并计算反转色，示例代码如下：

// 初始化particles.js后，获取canvas元素
const particlesCanvas = document.querySelector("#particles-js canvas");
const ctx = particlesCanvas.getContext("2d");

// 定时获取视频像素并更新粒子颜色
setInterval(() => {
  // 获取视频某一区域的像素数据（这里取中心区域）
  const video = document.querySelector(".video-container video");
  ctx.drawImage(video, 0, 0, 1, 1);
  const pixel = ctx.getImageData(0, 0, 1, 1).data;
  
  // 计算反转色：255 - 原颜色值
  const invertedColor = `rgb(${255 - pixel[0]}, ${255 - pixel[1]}, ${255 - pixel[2]})`;
  
  // 更新particles的颜色配置
  particlesJS("particles-js", {
    particles: {
      color: {
        value: invertedColor
      }
    }
  });
}, 100); // 每100ms更新一次，可根据性能调整

这个方案能让粒子颜色始终和视频背景形成对比，但会有一定性能消耗，适合对视觉效果要求较高的场景。

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