Esta pregunta se puede abordar de diversas maneras, pero nosotros te mostramos la resolución más completa para nosotros.
Solución:
Al usar el blur o opacity propiedad, no es posible ignorar el elemento hijo. Si aplica cualquiera de esas propiedades al elemento principal, también se aplicará automáticamente a los elementos secundarios.
Hay una solución alternativa: crea dos elementos dentro de tu padre div – una div para el fondo y otro div por los contenidos Colocar position:relative en el padre div y establecer position:absolute; top:0px; right:0px; bottom:0px; left:0px; (o establecer alto/ancho al 100%) al elemento secundario para el fondo. Usando este método, el contenido div no se verá afectado por las propiedades del fondo.
Ejemplo:
#parent_div
position: relative;
height: 100px;
width: 100px;
#background
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
filter: blur(3px);
z-index: -1;
My Text
Si ve el fondo enmascarando el contenido, utilice el z-index propiedad para enviar el fondo detrás del segundo contenido div.
¿Cómo deshabilitar el desenfoque en el elemento secundario?
.enableBlur>*
filter: blur(1.2px);
.disableBlur
filter: blur(0);
qqqqq
qqqqq
aaaaa
bbbbb
DDDDD
Simplemente cree dos divisiones y ajuste sus índices z y márgenes de modo que la división que desea difuminar quede debajo de la división que desea que aparezca en la parte superior.
PD: No cree una división dentro de una división porque el hijo hereda las propiedades del padre.
#forblur
height: 200px;
width: 200px;
background-color: blue;
margin: auto;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px) -ms-filter: blur(3px);
filter: blur(3px);
z-index: -1;
#on-top-container
margin: auto;
margin-top: -200px;
text-align: center;
height: 200px;
width: 200px;
z-index: 10;
TEXT