Fondos borrosos con CSS: evitar el contenido borroso

Los fondos borrosos pueden mejorar la estética del sitio web y centrar la atención en el contenido clave. Pero, ¿qué pasa si el desenfoque afecta involuntariamente el contenido en sí?

En este ejemplo, se intenta desenfocar la imagen de fondo preservando al mismo tiempo la claridad del texto de primer plano dentro de un elemento de extensión. Para lograr esto, se puede emplear CSS estratégicamente.

La técnica clave implica utilizar la pseudoclase :before para heredar la imagen de fondo. Se introduce un nuevo elemento div con la clase "blur-bgimage" y se agrega una pseudoclase :before. Este pseudoelemento hereda la imagen de fondo usando la propiedad background:hered.

A continuación, el pseudoelemento :before se difumina efectivamente usando filtros CSS. Al incorporar estos filtros (desenfoque (10px) en este caso), la imagen de fondo obtiene el efecto de desenfoque deseado.

Al div ".blur-bgimage" se le asigna overflow: oculto para ocultar el área borrosa más allá los límites del div. El margen, la alineación del texto y el índice z también se configuran adecuadamente.

Para alternar el efecto de desenfoque, se puede emplear JavaScript para agregar o eliminar la clase ".blur-bgimage", como se demuestra en el ejemplo de jsfiddle proporcionado. . Con este método, el efecto de desenfoque del fondo se puede controlar dinámicamente sin comprometer la claridad del contenido.