Cómo difuminar una imagen de fondo en CSS

En aplicaciones web, el uso de imágenes de fondo es un gran enfoque para crear una página web estéticamente sólida. A veces, se requiere desdibujar la imagen de fondo para centrarse en el contenido de la página. Además, hace que una página web se vea diferente de miles de otras páginas web. CSS ofrece numerosas funciones para manipular la imagen de fondo.

Esta guía cubrirá cómo difuminar una imagen de fondo en CSS.

Cómo difuminar una imagen de fondo en CSS?

Para hacer que la imagen de fondo se desenfoque en poco tiempo, utilizaremos la propiedad CSS "Filtrar". La utilización de la propiedad del filtro nos ayudará a borrar imágenes de manera eficiente.

Entonces, saltemos a los detalles.

¿Qué es la propiedad de filtro en CSS??

En CSS, para colocar algunos efectos gráficos en los elementos HTML ",filtrarSe utiliza la propiedad. Por ejemplo, si desea colocar algunos efectos en una imagen, como desenfoque o contraste, puede usar la propiedad de filtro.

Sintaxis:

Filtro: blur () | brillo () | Hue-Rotate () | contraste () | opacidad () | escala de grises () | invert () | shadow () | saturar () | sepia () | url () | ninguno

Como la propiedad del filtro tiene muchos valores y si elaboramos algunos como brillo () hace que los elementos brillen u oscuro, Opacity () juega con transparencia, blur () hace que los elementos HTML se desaguilen y ninguno elimine los efectos si está presente presente.

Entonces, sigamos adelante y entendamos profundamente con un ejemplo de que cómo podemos hacer que la imagen de fondo se desenfoque en CSS.

Ejemplo

Aquí hay una imagen de fondo en nuestra página web, hagamos que se desduzca.

En el archivo HTML, tome un ""Elemento dentro del"" etiqueta.

Html

Ahora, diremos al código CSS:

• Especifica el "fondo"Propiedad con el valor"url" y "sin repetición". Esto establecerá la imagen de fondo no repetida.
• Asignar un espacio apropiado a la imagen usando "relleno"Propiedad con un valor"25%".
• En el siguiente paso, asignaremos "filtrar"Propiedad un valor"desenfoque (9px)"Para hacer que la imagen se vea borrosa. El valor dentro del desenfoque (), "9px"Permite controlar cuánto queremos difuminar la imagen seleccionada como si aumentamos el valor a 10px, hará que la imagen se vea más borrosa. Por otro lado, si disminuimos el valor a 6 o 7px, hará que la imagen se vea menos borrosa. Además, podemos usar la unidad "movimiento rápido del ojo"En lugar de PX.

CSS

div
Antecedentes: URL (árboles.jpg) no repatoso;
relleno: 25%;
Filtro: desenfoque (9px);

Finalmente, guarde su código y ábralo en su navegador para verificar el trabajo.

Hemos explicado cómo difuminar una imagen de fondo en CSS fácilmente.

Conclusión

Para hacer que la imagen de fondo se desenfoque, utilice el CSS "filtrar"Propiedad con el valor"difuminar()". El Valor Blur se puede modificar para controlar la frecuencia de desenfoque de una imagen especificada. Puede establecer el valor en PX o REM para aumentar o disminuir el efecto de desenfoque en la imagen. Este artículo explica cómo desdibujar una imagen de fondo en CSS.