Blur не работает, как ожидалось - PullRequest
Новая
       4

Blur не работает, как ожидалось

0 голосов
/ 01 июня 2018

Я пытаюсь применить эффект размытия во всплывающем окне.

Я использую компонент p-dialog primeng. 

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

Проблема в том, что эффект размытия не работает должным образом.

На самом деле у меня есть эффект "свечения" ( см. Демонстрацию ), а не настоящий эффект размытия, такой как здесь

1 Ответ

0 голосов
/ 04 июня 2018

Я нашел решение.

Я должен обернуть содержимое, которое я должен размыть в div, и применить к нему эффект, когда pdiaog расходуется, используя ngclass

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

In CSS 

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

демо

...