Nello sviluppo web, potresti spesso sentire la necessità di aggiungere sfondi trasparenti. La ricerca della proprietà in background trasparente in CSS non ti darà alcun risultato in quanto non esiste una tale proprietà trasparente. Tuttavia, è possibile utilizzare proprietà alternative o il codice colore trasparente per lo stesso scopo.

In questo blog, impareremo a impostare il colore di sfondo trasparente in CSS.

Come impostare il colore di sfondo trasparente in CSS?

Per impostare il colore di sfondo trasparente, useremo i seguenti metodi:

• Proprietà a base di background
• Proprietà opacità

Passiamo attraverso ogni metodo uno per uno!

Metodo 1: usando il colore di sfondo per impostare il colore di sfondo trasparente in CSS

In CSS, il “colore di sfondo"La proprietà viene utilizzata per assegnare un colore diverso allo sfondo. Inoltre, l'utilizzo della proprietà di base in modo specifico può anche impostare la trasparenza di diversi elementi.

Esempio

Ecco la nostra pagina HTML con due sfondi, uno come immagine e l'altro come sfondo del contenitore. Vogliamo rendere trasparente lo sfondo del contenitore in modo da poter vedere attraverso l'immagine aggiunta a causa della trasparenza del contenitore:

Nel nostro file HTML, abbiamo aggiunto un "

"Tag con una classe chiamata"bg"All'interno di un elemento Div e lo ha posizionato all'interno del""Tag:

Trasparente

Nel file CSS, usa il “." Prima "bg"Per dichiararlo come una classe. Quindi, aggiungi la proprietà in background-color insieme al valore RGBA, assegna il “100px"Implementazione e imposta il colore del testo come"bianco". Poiché la combinazione di colori RGBA ha il suo formato corretto, imposteremo tutti i suoi valori su zero tranne l'ultimo. Imposta l'ultimo valore su ".25"Per ottenere una tonalità di trasparenza. Tuttavia, può essere sostituito con "0"Avere una chiara tonalità di trasparenza.

Nel passaggio successivo, assegnare a Div una imbottitura "200px"E imposta l'URL dell'immagine di sfondo desiderata:

Nota: Non abbiamo rimosso il colore di fondo precedentemente impostato come "Aqua". Di conseguenza, lo sfondo trasparente del contenitore sarà chiaramente visibile usando la combinazione di colori RGBA.

Come puoi vedere, abbiamo impostato correttamente il colore di sfondo trasparente utilizzando la proprietà di sfondo.

Ora, controlliamo il metodo di utilizzo di un'altra proprietà CSS per l'impostazione di un colore di sfondo trasparente.

Metodo 2: utilizzando la proprietà opacità per impostare il colore di sfondo trasparente in CSS

In CSS, il “opacità"La proprietà viene utilizzata per rendere trasparenti gli elementi. Tuttavia, ci sono sempre livelli di trasparenza che possono essere specificati, come 1 - 100 (%). Ad esempio, un elemento con "0"L'opacità sarà completamente trasparente.

Esempio 1

In questo esempio, assegneremo il "0.2"Valore di opacità al".bg" classe. Tutte le altre proprietà rimarranno le stesse:

Qui, abbiamo impostato correttamente il background trasparente:

Tuttavia, l'impostazione dell'opacità ha anche applicato l'effetto di trasparenza al testo aggiunto. Per affrontare uno scenario del genere, prendiamo un altro esempio.

Esempio 2

Quando si assegna un valore di opacità, viene applicato a ogni elemento all'interno del contenitore specificato con la stessa classe. Tuttavia, la modifica della classe del testo aggiunto può risolvere il problema dichiarato.

Per farlo, assegneremo la classe "testo" A

tag e classe "bg"Al tag:

Trasparente

Ora il "Trasparente"Il testo appartiene a una classe diversa".testo". Quindi, specificheremo il suo "posizione"E dai il valore"assoluto", Assegna il"margine-top"Valore della proprietà come"-9%" E "margine-sinistra"Valore come"50px"Per ottenere il testo sulla casella:

.testo
Posizione: assoluto;
margine -top: -9%;
Margin-Left: 50px;
colore bianco;

Si può vedere che ora l'opacità viene applicata solo al contenitore per renderlo trasparente senza modificare il testo aggiunto:

Abbiamo fornito i modi più semplici per impostare il colore di sfondo trasparente in CSS.

Conclusione

Per impostare il colore di sfondo trasparente in CSS, è possibile utilizzare "colore di sfondo"Proprietà con il valore RGBA e il"opacità" proprietà. La proprietà di sfondo può essere utilizzata due volte, una per impostare lo sfondo originale e la seconda per rendere il primo trasparente utilizzando la combinazione di colori RGBA. Tuttavia, il valore della proprietà dell'opacità viene applicato a tutti gli elementi della classe specifica per la quale è definito. In questo articolo, abbiamo coperto due metodi efficienti per impostare il colore di sfondo trasparente in CSS.