Come sfocare un'immagine di sfondo in CSS

Nelle applicazioni Web, l'uso di immagini di sfondo è un ottimo approccio per creare una pagina web esteticamente audio. A volte, è necessario offuscare l'immagine di sfondo per concentrarsi sul contenuto della pagina. Inoltre, rende una pagina web diversa da migliaia di altre pagine Web. CSS offre numerose funzioni per manipolare l'immagine di sfondo.

Questa guida coprirà come sfocare un'immagine di sfondo in CSS.

Come sfocare un'immagine di sfondo in CSS?

Per rendere l'immagine di sfondo sfocata in pochissimo tempo, useremo la proprietà CSS "Filtro". L'utilizzo della proprietà del filtro ci aiuterà a sfocarsi in modo efficiente.

Quindi, saltiamo nei dettagli.

Cos'è la proprietà del filtro in CSS?

In CSS, per posizionare alcuni effetti grafici sugli elementi HTML, "filtro"La proprietà viene utilizzata. Ad esempio, se si desidera porre alcuni effetti su un'immagine, come Blur o Contrast, è possibile utilizzare la proprietà del filtro.

Sintassi:

Filtro: BluR () | luminosità () | Hue-rotate () | contrasto () | opacità () | grigio () | invert () | drop-shadow () | saturate () | seppia () | url () | nessuno

Poiché la proprietà del filtro ha molti valori e se ne elaboriamo alcuni come la luminosità () rende gli elementi luminosi o scuri, l'opacità () gioca con trasparenza, Blur () fa sfuggire gli elementi HTML e nessuno rimuove gli effetti se presenti.

Quindi, andiamo avanti e comprendiamo profondamente con un esempio che come possiamo far sfuggire l'immagine di sfondo in CSS.

Esempio

Ecco un'immagine di sfondo sulla nostra pagina web, facciamolo sfuggire.

Nel file HTML, prendi un ""Elemento all'interno del"“Tag.

Html

Ora, andiamo al codice CSS:

• Specificare la "sfondo"Proprietà con il valore"URL" E "no-ripeat". Questo imposterà l'immagine di sfondo non ripetuta.
• Assegnare uno spazio appropriato all'immagine usando "imbottitura"Proprietà con un valore"25%".
• Nel prossimo passaggio, assegneremo "filtro"Proprietà un valore"Blur (9px)"Per rendere l'immagine sfocata. Il valore all'interno del Blur (), "9px"Permette il controllo di quanto vogliamo offuscare l'immagine selezionata come se aumentiamo il valore a 10px, farà sembrare l'immagine blurier. D'altra parte, se diminuiamo il valore a 6 o 7px, renderà l'immagine meno sfocata. Inoltre, possiamo usare l'unità "REM"Invece di px.

CSS

div
Background: URL (alberi.jpg) no-ripeat;
imbottitura: 25%;
Filtro: Blur (9px);

Infine, salva il tuo codice e aprilo nel browser per verificare il lavoro.

Abbiamo spiegato come sfocare un'immagine di sfondo in CSS facilmente.

Conclusione

Per far sfuggire l'immagine di sfondo, utilizzare il CSS "filtro"Proprietà con il valore"sfocatura()". La sfocatura del valore può essere modificata per controllare la frequenza di sfocatura di un'immagine specificata. È possibile impostare il valore in PX o REM per aumentare o ridurre l'effetto sfocatura sull'immagine. Questo articolo sta spiegando come sfocare un'immagine di sfondo in CSS.