角度材质MatSpinner如何使背景变灰

Question

我有一个loader组件，loader组件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
}

然后您可以使用微调器

关闭和打开类显示