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

问题是模糊效果无法正常工作。

实际上我有一个＆＃34;发光＆＃34;效果（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

模糊不按预期工作

1 个答案: