각형 재질 MatSpinner 회색으로 배경을 만드는 법

Question

show = true/false 인 로더 구성 요소 인 로더 구성 요소 html이 있습니다. 내가 app.component.html에 포함 시켰을 때 잘 작동하는 matSpinnner를 포함하려고 시도했지만 배경이 회색으로 표시되지 않았습니다.

loading.component.html :

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

app.component.html에서

.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; 
} 

형 .css : 여기

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

앱 로더 로더 구성 요소 인 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 
} 

그럼 그냥 배경 및 사용으로 사업부를 추가 스피너