CSS：模糊股利

Question

我有这样一个div：

<div class="customer"> 
<div [ngSwitch]="accessLevel"> 
<div class="customer" *ngSwitchCase="'ENABLED'"> 
<h2 class="label">Customer</h2><br> 
<span>{{customerData.oldId}}</span><br> 
<span>{{customerData.firstName}}</span><br> 
<span>{{customerData.lastName}}</span><br> 
<span>{{customerData.addressLine1}}</span><br> 
<span>{{customerData.email}}</span> 
</div> 
<div class="customer-blurr" *ngSwitchCase="'DISABLED'"></div> 
<div class="customer-blurr" *ngSwitchDefault></div> 
</div> 
</div> 

和CSS：

.customer{ 
    float: left; 
    width: 27%; 
    height: 350px; 
    box-sizing: border-box; 
    padding: 15px; 
} 
.customer-blurr { 
    color: transparent; 
    text-shadow: 0 0 5px rgba(0,0,0,0.5); 
    background-color: #ccc; 
    float: left; 
    width: 27%; 
    height: 350px; 
    box-sizing: border-box; 
    padding: 15px; 
} 

当条件残疾人是真的我想我的股利是模糊的，它也适用，但尺寸/大小不同。请参阅附件中的图片，查看与标签宽度相关的尺寸。

请帮我这个。

感谢

Answer 1

有这样

<div class="customer"> 
<div [ngSwitch]="accessLevel"> 
<div class="customer" disabled = "{ return *ngSwitchCase }"> 
<h2 class="label">Customer</h2><br> 
<span>{{customerData.oldId}}</span><br> 
<span>{{customerData.firstName}}</span><br> 
<span>{{customerData.lastName}}</span><br> 
<span>{{customerData.addressLine1}}</span><br> 
<span>{{customerData.email}}</span> 
</div> 
<div class="customer-blurr" *ngSwitchDefault></div> 
</div> 
</div> 

和CSS作为

.customer{ 
    float: left; 
    width: 27%; 
    height: 350px; 
    box-sizing: border-box; 
    padding: 15px; 
} 
.customer[disabled=disabled] { 
    color: transparent; 
    text-shadow: 0 0 5px rgba(0,0,0,0.5); 
    background-color: #ccc; 
    float: left; 
    width: 27%; 
    height: 350px; 
    box-sizing: border-box; 
    padding: 15px; 
}