Html 使用动画角度组件作为背景

我有以下

app.component.ts

文件：

<mat-toolbar color="primary">My Application</mat-toolbar>
<router-outlet></router-outlet>
<particles [style]="style" [width]="width" [height]="height" [params]="params"></particles>

我的应用程序

在这里，我试图使用

组件来提供动画背景，我希望能够使用路由模块插座来启用显示在

组件顶部的任何组件

通过将应用程序路由到默认的材质设计卡，我得到的是：

如何设置

组件和

的样式，以确保MD卡（或者路由器指向的任何东西）显示在背景前面。

尝试以下CSS：

/deep/ .particles-container {
    background-color: #000051;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    z-index: -1;
}

需要将位置设置为固定，以便它占据整个屏幕，而不是坐在内容下方

这是你的闪电战

---

只需根据文档的结构将z索引设置为高于

粒子的z索引即可。如果不使用z-index，文档后面的所有内容都将显示在前面的once上。@user184994我使用了z-index，但运气不好。请参阅我的示例@DomenikReitzner查看我的上述评论。也许可以尝试
z-index:-1应从前面移除自身。