Applying CSS Glass/Blur Effect to an Overlay

Q: Implementing a blur effect on a semi-transparent overlay

A web developer is facing difficulties in applying a blur effect to an overlay div, making the content behind the div appear Blurred.

Tentativa anterior:

O desenvolvedor tentou implementar o efeito usando os seguintes CSS:

#overlay {
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

No entanto, essa abordagem não foi bem-sucedida. filtro de pano de fundo: Blur (6px); }

Browser Support:

Observe que o suporte do navegador para filtro de fundo não é abrangente. No entanto, para muitos casos de uso, um efeito desfoque não é crítico.