Desenfoque CSS en la imagen de fondo mientras se preserva la claridad del contenido

Al intentar desenfocar una imagen de fondo en una configuración CSS, es común encontrar El problema es que el contenido (texto u otros elementos) también se vuelve borroso. Aquí es donde entran en juego el concepto de índice z y pseudoelementos.

Para desenfocar la imagen de fondo sin afectar el contenido, se puede emplear el siguiente enfoque:

1. Crear un contenedor para el fondo: Adjunte la imagen de fondo dentro de un div u otro contenedor y asígnele una clase, como "blur-bgimage".
2. Introducción de un pseudoelemento: Dentro de la clase "blur-bgimage", agregue una pseudoclase como :before. Esto crea una capa detrás del contenedor que hereda la imagen de fondo.
3. Desenfocar el fondo: Aplique el efecto de desenfoque al pseudoelemento usando filtros CSS. Esto difuminará la imagen de fondo heredada sin afectar el contenido.
4. Superposición del contenido: Coloque el contenido dentro del contenedor "blur-bgimage", asegurándose de que tenga un índice z más alto (p. ej. , índice z: 1) que el fondo borroso (índice z: 0).

A continuación se muestra un código de ejemplo:

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter: blur(10px);
    -moz-filter: blur(10px);
    -webkit-filter: blur(10px);
    -o-filter: blur(10px);

    transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
}

Al implementar este enfoque, puede difuminar eficazmente la imagen de fondo y al mismo tiempo preservar la claridad de su contenido, lo que permite diseños de sitios web visualmente atractivos.