Angular ng-粒子作为背景

Question

我正在尝试在我的 Angular 12 项目中使用 ng-particles 作为背景。
这是我的 app.component.html:

<div class="main">
    <ng-particles [id]="id" [options]="particlesOptions"></ng-particles>
    <div>
        <app-header></app-header> 
        <router-outlet></router-outlet>
    </div>
    <app-footer></app-footer>
</div>

粒子工作正常，但它显然只是我的页眉、路由器出口和页脚上的一个元素。如何在 Angular 中获取 ng 粒子作为背景？
我一直在搜索，但没有找到很好的例子。我曾尝试在 ng-particles 元素上设置 position: absolut 但这导致了故障行为。谢谢你的帮助！
这是我现在使用的模块： https://www.npmjs.com/package/ng-particles

Answer 1

您可以仅使用选项将粒子设置为背景。不需要额外的 CSS。

您可以在此处查看 fullScreen 选项：https://particles.js.org/docs/interfaces/Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html

因此，您唯一需要做的就是将其添加到您的粒子配置中：

{
  fullScreen: {
    enable: true,
    zIndex: 0 // or any value is good for you, if you use -1 set `interactivity.detectsOn` to `"window"` if you need mouse interactions
  },
  /* your config */
}

Angular ng-粒子作为背景

Angular ng-particles as background

html

css

particles.js

angular