Metodi diversi per oscurare l'immagine di sfondo in CSS

Senza dubbio, le immagini di sfondo migliorano l'aspetto di una pagina web. Tuttavia, se le immagini aggiunte sono molto luminose e hanno effetti multicolori, allora possono rendere una pagina poco attraente e l'utente si sentirà a disagio. In uno scenario simile, l'opzione migliore è oscurare le immagini aggiunte.

Devi scaricare le immagini e modificarle in Photoshop? Assolutamente no! Diverse proprietà CSS possono servirti allo scopo specificato.

In questo articolo, spiegheremo i vari metodi per oscurare le immagini di sfondo usando CSS.

Come scurire l'immagine di sfondo in CSS?

Dai un'occhiata alle proprietà sotto l'elenco di seguito per oscurare le immagini di sfondo usando CSS.

• Proprietà del filtro
• Proprietà in background
• Proprietà in modalità miscela in background

Esploriamo ogni metodo uno per uno!

Metodo 1: utilizzare la proprietà "Filtro" per scurire l'immagine di sfondo in CSS

In CSS, il “filtro"La proprietà viene utilizzata per aggiungere effetti grafici sugli elementi HTML, in particolare sulle immagini. Questa proprietà può anche aiutare a oscurare l'immagine di sfondo quando è "luminosità"Il valore è aggiunto.

Guarda l'esempio dato per controllare la procedura per scurire l'immagine di sfondo usando la proprietà del filtro CSS.

Esempio

In questo esempio, oscureremo la seguente immagine di sfondo:

Nel primo passo, useremo il "sfondo"Proprietà con il valore"url ()"Per impostare l'immagine di sfondo; Dichiarare il "no-ripeat"Non lascerò che l'immagine si ripeta più volte. Poi, "imbottitura" Di "15%"Verrà utilizzato per dare lo spazio specifico al nostro contenitore. Infine, usando il “filtro"Proprietà e imposta il suo valore su"luminosità (40%)"Ridurrà la luce che si riversa sull'immagine e lo farà scurire:

Salva il codice aggiunto nel file HTML e semplicemente aprilo nel browser o usa il “Server live"Estensione per lo stesso scopo:

Come puoi vedere, l'immagine di sfondo è stata oscurata usando la proprietà del filtro CSS:

Metodo 2: utilizzare la proprietà "sfondo" per scurire l'immagine di sfondo in CSS

IL "sfondo"La proprietà può essere utilizzata per impostare l'immagine di sfondo, il suo colore, le dimensioni e la posizione sulla pagina Web. In altre parole, usando la proprietà di sfondo, è possibile applicare quasi tutte le proprietà di un'immagine di sfondo contemporaneamente.

Esempio

Ora useremo il "sfondo"Proprietà con il valore"Lineare-gradient ()"E posiziona due valori con la combinazione di colori RGBA al loro interno. Questo creerà una tonalità di trasparenza grigia sull'immagine e lo farà scurirsi:

Produzione

Ora, scopri la proprietà in modalità di miscela di background nel prossimo metodo.

Metodo 3: utilizzare la proprietà "Modello di miscela di sfondo" per scurire l'immagine di sfondo in CSS

IL "MODO DI BASSACOLO MODO"La proprietà è utile quando il colore e un'immagine esistono insieme nello stesso posto. Questa proprietà viene utilizzata per mescolare gli strati di immagini con il colore di sfondo. Inoltre, oscurerà l'immagine di sfondo con un valore specifico.

Esempio

Innanzitutto, imposta il colore di sfondo "grigio"Per il contenitore usando il"colore di sfondo" proprietà. Nel passaggio successivo, usa il valore "moltiplicare"Lungo la proprietà"MODO DI BASSACOLO MODO". Questo fonderà l'immagine e mescolerà il suo livello con lo sfondo: