模糊没有按预期工作答案

【问题标题】：Blur not working as expected模糊没有按预期工作
【发布时间】：2018-06-04 20:40:14
【问题描述】：

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

我正在使用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 这样的真正模糊效果

【问题讨论】：

.ui-widget-overlay { 背景：rgba(102, 102, 102,0.5);不透明度：1;}
将其添加到我的示例中，不起作用
你是否同时改变了背景和不透明度？
@peinearydevelopment 我试图模糊对话框背景上的所有内容。（在示例中，文件按钮应该变得模糊）
@paragparmmar 我已将您的代码添加到 css 中。

标签： javascript html css angular primeng

【解决方案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

【讨论】：