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

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>组件来提供动画背景，并且我希望能够使用路由模块插座来使显示的任何组件都显示在<particles>组件的顶部。

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

我如何设置<particles>组件的样式以及<router-outlet>确保 MdCard（或者实际上是路由器指向的任何东西）显示在背景前面。

标签： htmlcssangular

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