Come impostare l'opacità di fondo in CSS

La configurazione di sfondi nelle applicazioni Web è un'operazione comune che attira gli occhi dell'utente. Tuttavia, a volte potrebbe portare a una grande distrazione. Per evitare tale situazione, gli sviluppatori Web rendono trasparenti i loro background applicando l'opacità o utilizzando le proprietà alternative di opacità CSS.

In questa guida, tratteremo come impostare l'opacità di fondo in CSS.

Come impostare l'opacità di fondo in CSS?

In CSS, l'opacità di fondo si riferisce ai seguenti termini:

• • Opacità dell'immagine di sfondo
  • Opacità del colore di sfondo

Ora spiegheremo entrambi individualmente!

Come impostare l'opacità dell'immagine di sfondo in CSS?

IL "opacità"La proprietà può essere utilizzata per rendere le immagini trasparenti in background o ovunque sulla pagina web. Testi e colori di sfondo possono anche essere resi trasparenti con l'uso di questa proprietà.

Dai un'occhiata all'esempio dettagliato fornito per saperne di più sull'impostazione dell'opacità dell'immagine di sfondo in CSS.

Esempio

Attualmente abbiamo un'immagine che è impostata sullo sfondo del nostro contenitore:

Nel nostro file HTML, abbiamo aggiunto un tag con "my-img"ID nella sezione del corpo:

Per impostare l'opacità dell'immagine di sfondo, dobbiamo modellare il nostro elemento di immagine. Per farlo, usa il "#"Prima di ID denominato"my-img" COME "#my-img"Per lo styling. Poiché l'immagine verrà utilizzata sullo sfondo del contenitore selezionato, dare un po 'di spazio al contenitore usando "imbottitura" Di "15%". Nel passaggio successivo, imposta l'immagine come sfondo utilizzando il "sfondo" proprietà; specificare la "no-ripeat"Valore lungo"url ()"Valore per evitare la ripetizione dell'immagine. Infine, imposta l'opacità come valore "0.2"O secondo le tue preferenze:

Ora, salva il codice e apri il file HTML nel browser. Nel nostro caso, lo apriremo con l'aiuto di "Server live":

Qui, l'opacità sulla nostra immagine è stata applicata con successo:

Andiamo verso la sezione successiva!

Come impostare l'opacità del colore di sfondo in CSS?

Ci sono sempre possibilità che potresti trovare colori solidi o gradienti sullo sfondo del sito Web. Per l'opacità dei colori di sfondo, utilizzeremo il the "colore di sfondo" proprietà. Questa proprietà aiuta a configurare il colore di sfondo; Tuttavia, può anche essere utilizzato per impostare l'opacità dei colori di sfondo o renderli trasparenti.

Guarda l'esempio seguente per l'uso della proprietà dichiarata.

Esempio 1: Utilizzo della proprietà in background per impostare un'immagine opacità

In questo esempio, il colore di sfondo della nostra pagina web è arancione e dobbiamo impostare la sua opacità:

Per fare ciò, useremo il codice di colore esagonale con "colore di sfondo" proprietà. Usando un colore esagonale specifico, applicheremo l'opacità al colore di sfondo:

Nota: Cambiando il "#00000020"Valore a"#00000000"Renderà il tuo background completamente trasparente.

Salva il codice premendo "Ctrl + s"E aprilo con il server live:

Produzione

Ora, prendiamo un altro esempio interessante di impostazione del colore di sfondo in CSS.

Esempio 2: Utilizzo della proprietà in background per rendere trasparente un'immagine

In questo esempio, useremo il "sfondo"Proprietà e impostare il suo valore su"trasparente". Di conseguenza, lo sfondo sarà trasparente ma ancora parte del contenitore:

Qui possiamo vedere lo sfondo totalmente trasparente:

Per la verifica, ispezionare gli elementi aggiunti nel contenitore:

Abbiamo fornito i modi più semplici per impostare l'opacità di fondo.

Conclusione

Per impostare l'opacità in background, utilizzare il “opacità","colore di sfondo", O "sfondo" proprietà. L'opacità fornisce il controllo sull'impostazione dell'opacità. La proprietà di sfondo può aiutare ad applicare la trasparenza degli sfondi tramite codice di colore hex, mentre la proprietà di sfondo è semplice; Impostarlo su trasparente farà svanire lo sfondo. In questo articolo, abbiamo dimostrato come impostare l'opacità di fondo in CSS.