CSS：模糊div

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

当条件禁用为真时我希望我的div模糊不清，但尺寸/尺寸也不同。请参阅附图，了解与标签宽度有关的尺寸。

请帮助我。

由于

[！[模糊] [1] [1] [！[有效] [3] [3]

Answer 1

让你的HTML像这样

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