代码之家 › 专栏 › 技术社区 › George Edwards

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

angular css html

George Edwards · 技术社区 · 8 年前

我有以下内容 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> 组件以提供动画背景,我希望能够使用路由模块插座使显示在组件顶部的任何组件 <颗粒> 组件。

通过将应用程序路由到默认材料设计卡,我可以得到以下信息:

我该怎么做 <颗粒> 组件和 <router-outlet> 以确保MD卡(或路由器指向的任何内容)显示在背景前面。

1 回复 | 直到 8 年前

user184994 8 年前

尝试以下CSS:

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

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

这是你的一把叉子

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