角材MatSpinner背景をグレーアウトする方法

Question

ローダーコンポーネント、ローダーコンポーネントhtmlにshow = true/falseがあります。私はapp.component.htmlにインクルードするときにうまく動作しているmatSpinnnerをインクルードしようとしていますが、背景はグレーではありません。

loading.component.html：app.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-header></app-header> 
    <app-loader></app-loader> 
    <router-outlet></router-outlet> 

ここでAPP-ローダはIローダ成分であります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 
} 

次に、あなただけの背景や使用などのdivを追加スピナー