React中如何让Particles.js在Banner区域结束后消失

你的核心问题是tsparticles默认的fullScreen配置会生成fixed定位且带!important优先级的canvas，导致粒子背景全屏覆盖所有内容。要让粒子仅在Banner区域显示，后续内容不受影响，有两种可行方案：

方案一：修改tsparticles配置（推荐） #

从根源关闭全屏模式，让粒子容器相对于Banner定位，这是最规范的解决方式：

1. 修改ParticlesBg.js的配置
   关闭fullScreen.enable，同时设置粒子容器的定位样式为absolute，让它只填充父容器（Banner）：

   export function ParticlesBg() {
       const particlesInit = useCallback(async engine => {
           console.log(engine);
           await loadFull(engine);
       }, []);
   
       const particlesLoaded = useCallback(async container => {
           await console.log(container);
       }, []);
   
       return (
           <Particles
               id="tsparticles"
               init={particlesInit}
               loaded={particlesLoaded}
               options={{
                   // 关闭全屏模式，取消fixed定位
                   fullScreen: {
                       enable: false,
                   },
                   // 设置粒子容器相对于父元素定位
                   style: {
                       position: "absolute",
                       top: 0,
                       left: 0,
                       width: "100%",
                       height: "100%",
                       zIndex: -1
                   },
                   background: {
                       color: {
                           value: "#000000",
                       },
                   },
                   fpsLimit: 60,
                   interactivity: {
                       events: {
                           onClick: {
                               enable: false,
                               mode: "push",
                           },
                           onHover: {
                               enable: false,
                               mode: "repulse",
                           },
                           resize: true,
                       },
                       modes: {
                           push: {
                               quantity: 4,
                           },
                           repulse: {
                               distance: 200,
                               duration: 0.4,
                           },
                       },
                   },
                   particles: {
                       color: {
                           value: "#ffffff",
                       },
                       links: {
                           color: "#ffffff",
                           distance: 150,
                           enable: true,
                           opacity: 0.5,
                           width: 1,
                       },
                       collisions: {
                           enable: true,
                       },
                       move: {
                           directions: "none",
                           enable: true,
                           outModes: {
                               default: "bounce",
                           },
                           random: false,
                           speed: 1,
                           straight: false,
                       },
                       number: {
                           density: {
                               enable: true,
                               area: 800,
                           },
                           value: 80,
                       },
                       opacity: {
                           value: 0.5,
                       },
                       shape: {
                           type: "circle",
                       },
                       size: {
                           value: { min: 1, max: 5 },
                       },
                   },
                   detectRetina: true,
               }}
           />
       );
   }
   

2. 给Banner添加相对定位
   在banner.css中给.banner添加position: relative，让粒子容器的absolute定位基于Banner：

   .banner{
       width: 100%;
       height: 100vh;
       position: relative; /* 新增，作为子元素absolute的定位基准 */
   }
   
   .banner h1 {
       font-size: 60px;
       color: white;
   }
   

方案二：用CSS强制覆盖canvas样式 #

如果不想修改tsparticles配置，可以通过更高优先级的CSS选择器覆盖canvas的fixed定位：

.banner #tsparticles canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.banner{
    width: 100%;
    height: 100vh;
    position: relative; /* 必须添加，让canvas相对于Banner定位 */
}

.banner h1 {
    font-size: 60px;
    color: white;
}

此方案利用父类选择器提升优先级，强制把canvas的fixed改为absolute，限制在Banner区域内。

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