TSParticles组件全屏问题：如何限制粒子仅在Wave区域可见？

我想在Wave组件上添加粒子效果以提升美观度，Wave上方将设置带动画的文本、描述及按钮。但多次尝试限制粒子的可见范围均失败，粒子始终全屏显示。我已尝试为粒子容器设置overflow: hidden，以及在粒子配置中添加fullscreen: false，但均无效果。

HeroImage.svelte #

<script lang="ts">
  import Particles from '$features/Particles.svelte';
</script>

<div id="wave">
  <div id="particles-container" style="overflow: hidden;">
   <Particles />
  </div>
  <img src="/src/assets/images/wave.svg" alt="wave" id="wave_hero">
</div>

Particles.svelte #

<script lang="ts">
  import { particlesInit } from '@tsparticles/svelte';
  import { onMount } from 'svelte';
  import { loadSlim } from '@tsparticles/slim';

  let ParticlesComponent: typeof import('@tsparticles/svelte').default;

  onMount(async () => {
   const module = await import('@tsparticles/svelte');
   ParticlesComponent = module.default;
  });

  let particlesConfig = {
   particles: {
    number: {
     value: 20,
     density: {
      enable: true,
      value_area: 800
     }
    },
    color: {
     value: "#ffffff"
    },
    shape: {
     type: "circle",
    },
    opacity: {
     value: 0.5,
     random: true,
     anim: {
      enable: true,
      speed: 1,
      opacity_min: 0.1,
      sync: false
     }
    },
    size: {
     value: 30,
     random: true,
     anim: {
      enable: false,
      speed: 4,
      size_min: 0.3,
      sync: false
     }
    },
    line_linked: {
     enable: false,
    },
    move: {
     enable: true,
     speed: 0.7,
     direction: "top" as const,
     random: false,
     straight: false,
     out_mode: "bounce",
     bounce: false,
     attract: {
      enable: false,
      rotateX: 600,
      rotateY: 1200
     }
    }
   },
   interactivity: {
    detect_on: "canvas",
    events: {
     onhover: {
      enable: true,
      mode: "bubble"
     },
     onclick: {
      enable: true,
      mode: "repulse"
     },
     resize: {
      enable: true
     }
    },
    modes: {
     grab: {
      distance: 400,
      line_linked: {
       opacity: 1
      }
     },
     bubble: {
      distance: 200,
      size: 0,
      duration: 2,
      opacity: 0,
      speed: 3
     },
     repulse: {
      distance: 400,
      duration: 0.4
     },
     push: {
      particles_nb: 4
     },
     remove: {
      particles_nb: 2
     }
    }
   },
   retina_detect: true,
  };

  let onParticlesLoaded = (event: CustomEvent) => {
   const particlesContainer = event.detail.particles;
   console.log(particlesContainer)
  };

  void particlesInit(async (engine) => {
   await loadSlim(engine);
  });
</script>

<svelte:component
   this={ParticlesComponent}
   id="tsparticles"
   class="particles"
   style=""
   options={particlesConfig}
   on:particlesLoaded={onParticlesLoaded}
/>

内容的提问来源于stack exchange，提问作者t1ltxz.gxd