Cómo desenfocar el contenido detrás de un div en HTML / CSS (leer detalles)

No voy a darle el procedimiento completo, sino solo una idea.

Necesita una aplicación de edición de fotos, puede ser Photoshop es perfecto. Acaba de crear un archivo PNG con total transparencia. Significa eliminar todo con borrador y, por lo tanto, sería transparente.

Ahora difumina esa imagen. Mantén el nivel de desenfoque como quieras en tu web. Bingo. Guarde esa imagen con anyName.png

Luego mantenga esa imagen como fondo en su etiqueta div . Eso es.

Ahora, cada vez que abra esa etiqueta, la imagen de fondo es borrosa transparente, por lo tanto, el fondo principal se verá borroso.

.blur {
-webkit-filter: desenfoque (3px);
-moz-filter: desenfoque (3px);
-o-filtro: desenfoque (3px);
-ms-filter: desenfoque (3px);
filtro: desenfoque (3px);
}

Esta es la mejor manera que encontré para garantizar que sea compatible con una variedad de navegadores web. Simplemente tome esa clase y aplíquela a ese div así:

En mi caso, creé un modal personalizado que, cuando se abría, desenfocaría el contenido de toda la página. Lo hice usando jQuery para agregar un detector de eventos al elemento cliqueado así:

función HideAll () {
$ (‘. allContent’). removeClass (‘blur’);

$ (‘. loginForm’). fadeOut (500);
$ (‘. registerForm’). fadeOut (500);
$ (‘. registerForm’). fadeOut (500);
$ (‘. addPetForm’). fadeOut (500);
$ (‘. shotsForm’). fadeOut (500);
}

$ (‘. login’). click (function () {
Ocultar todo();
$ (‘. loginForm’). fadeToggle (500);
$ (‘. allContent’). toggleClass (‘blur’);
});

Si desea ver cómo se ve eso, la página de inicio del seguro se encuentra en:

HealthEPet

Los enlaces de inicio de sesión y registro en la barra de navegación tienen esos eventos vinculados a ellos.

Esta es una imagen de una página web en la que estoy trabajando. Si este es el resultado que está dispuesto a producir, el siguiente es un pequeño código que puede ayudarlo.

Aclamaciones.

puede haber otras formas

pero esto es lo que siempre hago

1.crear un div que cubra toda la página y cambiar su opacidad

para hacerlo borroso

2.Cree otro div (cuadro pequeño) y colóquelo sobre el div anterior utilizando el índice z

y alinearlo al centro de la página

3.Introduzca el contenido en la caja pequeña.