javascript - 模糊无法按预期工作

Question

我正在尝试对对话框弹出窗口应用模糊效果。

我正在使用 primeng p-dialog 组件。

<p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>

<p-dialog header="HELLO" [(visible)]="display" modal="modal" [responsive]="true" [width]="350" [minWidth]="200" (onHide)="close($event)" >
    <span>hi</span>

</p-dialog>

在 CSS 中我应用了模糊效果

::ng-deep .ui-widget-overlay {
      filter: blur(20px);
}

问题是模糊效果没有按预期工作。

实际上我有一个“发光”效果 ( see demo ) 而不是像 here 这样的真正的模糊效果

Answer 1

我找到了解决方案。

我应该将我应该模糊的内容包装在一个 div 中，然后在使用 ngclass 扩展 pdiaog 时对其应用效果

<div [class.container]="display">
  <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>

</div>
<p-dialog header="HELLO" [(visible)]="display" modal="modal" [responsive]="true" [width]="350" [minWidth]="200" (onHide)="close($event)" >
    <span>hi</span>

</p-dialog>

在 CSS 中

.container {
  filter: blur(3px);
}

demo