Angular Material Mat Spinner 如何使背景变灰

Question

我有一个加载器组件，加载器组件 html，它有 show = true/false。我正在尝试包含 matSpinnner，当我包含在 app.component.html 中时它工作得很好，但背景没有变灰。

loading.component.html：

<div class="spinner_container"><mat-spinner *ngIf="show"></mat-spinner></div>

.css

 .spinner_container {
    border-radius: 10px;
    height: 70px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 70px;
    z-index: 3;
    opacity: 0.5;
}

在 app.component.html 中：

    <app-header></app-header>
    <app-loader></app-loader>
    <router-outlet></router-outlet>

这里的 app-loader 是我在 app.component.html 中放置的加载器组件，但是如何使我的应用程序背景的背景变灰，以便用户在微调器熄灭之前无法单击任何控件。

这是我的微调器的图像，它工作正常，除了所有背景控件都可以访问并且没有变灰。

Answer 1

我会做这样的事情：

  .dark-overlay{
    background-color: rgba(0,0,0,0.7);
    position: absolute; <--fixed as per the suggestion below
    top:0;
    left:0;
    width: 100%;
    min-height:805px; <-- make this div height or adjust to full page height
}

然后您可以使用微调器关闭和打开类显示