Como embaçar uma imagem de fundo no CSS

Em aplicativos da web, o uso de imagens de fundo é uma ótima abordagem para criar uma página da web esteticamente sólida. Às vezes, é necessário embaçar a imagem de fundo para se concentrar no conteúdo da página. Além disso, faz com que uma página da web pareça diferente de milhares de outras páginas da web. CSS oferece inúmeras funções para manipular a imagem de fundo.

Este guia abordará como embaçar uma imagem de fundo no CSS.

Como embaçar uma imagem de fundo no CSS?

Para deixar a imagem em segundo plano embaçar em pouco tempo, usaremos a propriedade "filtro" CSS. Utilizar a propriedade Filter nos ajudará a desaparecer imagens com eficiência.

Então, vamos pular nos detalhes.

O que é a propriedade Filter em CSS?

No CSS, para colocar alguns efeitos gráficos nos elementos HTML, “filtro”Propriedade é usada. Por exemplo, se você deseja colocar alguns efeitos em uma imagem, como desfoque ou contraste, pode usar a propriedade Filter.

Sintaxe:

Filtro: Blur () | brilho () | Hue-Rotate () | Contraste () | opacidade () | cinza escala () | invert () | Drop-Shadow () | Saturação () | Sepia () | url () | nenhum

Como a propriedade do filtro tem muitos valores e se elaborarmos alguns como o brilho () faz com que os elementos brilhantes ou escuros, opacity () tocam com transparência, Blur () faz com que os elementos html se desfocem e nenhum remova os efeitos se presente.

Então, vamos seguir em frente e entender profundamente com um exemplo de que como podemos deixar a imagem de fundo borrão no CSS.

Exemplo

Aqui está uma imagem de fundo em nossa página da web, vamos deixar embaçar.

No arquivo html, pegue um “”Elemento dentro do“" marcação.

Html

Agora, vamos para o código CSS:

• Especifique o "fundo”Propriedade com o valor“url" e "sem repetir”. Isso definirá a imagem de fundo não repetida.
• Alocar um espaço apropriado para a imagem usando “preenchimento”Propriedade com um valor“25%”.
• Na próxima etapa, atribuiremos “filtro”Propriedade um valor“Blur (9px)”Para fazer a imagem parecer embaçada. O valor dentro do Blur (), “9px”Permite controlar o quanto queremos embaçar a imagem selecionada, como se aumentarmos o valor para 10px, isso fará com que a imagem pareça embaçada. Por outro lado, se diminuirmos o valor para 6 ou 7px, fará com que a imagem pareça menos embaçada. Além disso, podemos usar a unidade “rem”Em vez de px.

CSS

div
Antecedentes: URL (árvores.jpg) sem repetição;
preenchimento: 25%;
filtro: desfoque (9px);

Por fim, salve seu código e abra -o no seu navegador para verificar o trabalho.

Nós explicamos como embaçar uma imagem de fundo em CSS facilmente.

Conclusão

Para deixar a imagem de fundo embaçar, utilize o CSS “filtro”Propriedade com o valor“borrão()”. O desfoque do valor pode ser modificado para controlar a frequência desbotada de uma imagem especificada. Você pode definir o valor em PX ou REM para aumentar ou diminuir o efeito do desfoque na imagem. Este artigo está explicando como embaçar uma imagem de fundo no CSS.