使用动画角度分量作为背景

Question

我有以下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>

这里我试图使用<particles>组件来提供动画背景，我希望能够使用路由模块插座来启用显示的任何组件显示在{{1组件。

随着应用程序路由到默认的材料设计卡，这就是我得到的：

如何设置<particles>组件和<particles>的样式，以确保MdCard（或者路由器指向的内容）显示在后台前面。

Answer 1

尝试以下CSS：

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

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

这是stackblitz的一个分支

https://stackblitz.com/edit/angular-qf4pdp?file=src/app/app.component.css