Opacità del colore di sfondo CSS
Esempio 1:
Apri il file HTML e crea quattro intestazioni nel file HTML in modo da poter applicare il colore di sfondo e modificare l'opacità del colore usando CSS. In questo tutorial, utilizziamo lo studio del codice visivo per eseguire questi codici di HTML e CSS. Creiamo il file HTML in questo software e scriviamo HTML. Il codice è fornito nella seguente immagine:
Questa è l'immagine del codice HTML sopra menzionato. Modificheremo l'opacità del colore di sfondo di tutte le intestazioni e ti mostreremo il colore con diversi valori di opacità.
Codice CSS:
Creeremo un file CSS in cui utilizziamo la proprietà CSS per modificare l'opacità del colore di sfondo delle intestazioni sopra. In questo codice, utilizziamo la proprietà "opacità" di CSS.
Per aver guidato 1 "H1", abbiamo impostato il "colore di sfondo" su "giallo". L '"opacità" è "0.4 "per questa intestazione e il colore del carattere è" nero ". L'elemento 2 "color background" è anche "gialla" ma la "opacità" qui è "0.6 ". Il "colore di sfondo" della direzione 3 è anche "giallo" ma questa volta l '"opacità" è "0.8 ". Ora arriva l'intestazione 4. Il suo "colore di sfondo" è uguale alle intestazioni precedenti, ma qui non usiamo il colore "opacità". Quindi, il "colore di sfondo" della quarta intestazione appare come il colore originale "giallo".
Produzione:
La differenza nel valore di opacità del colore di sfondo è mostrata in questo output. Puoi vedere la differenza tra l'opacità del colore in questa immagine.
Il primo colore di sfondo intestazione mostra più trasparenza perché il valore di opacità del colore di sfondo è “0.4 ". La seconda intestazione è meno trasparente del colore di sfondo della prima intestazione poiché il suo valore di opacità è “0.6 ". Quindi, lo stesso della seconda intestazione, il colore di sfondo della terza intestazione è meno trasparente del secondo. Questa volta, la "opacità" è "0.8 ". E nell'ultima intestazione, abbiamo usato il colore giallo originale senza usare alcun valore di opacità.
Esempio n. 2:
In questo codice HTML, abbiamo due titoli e quattro paragrafi. Ogni paragrafo è scritto all'interno della classe "Div" e queste classi "Div" sono nominate rispettivamente "prima", "secondo" e "terzo". Useremo questi nomi di div quando modelliamo questi paragrafi in CSS. Cambieremo l'opacità del colore di sfondo di ogni paragrafo.
Codice CSS:
Questo è il codice CSS in cui impostiamo il colore dell'intestazione 1 come "verde". Il testo delle intestazioni 1 e 2 è allineato nel "centro" usando il "allineamento del testo". Imposta il colore "Green" di sfondo "div" usando "RGB (0, 151, 19)". La "imbottitura" è "10px" da sinistra, destra, in alto e in basso. L'allineamento del testo "usato qui è" giustificare " . Ora, usa il primo Div in cui abbiamo cambiato il colore di sfondo con il valore di opacità di “0.2 "ed è scritto sotto forma di" RGBA (0, 151, 19, 0.2) ". Il "valore di opacità" qui è "0.2 ". Il valore "alfa" rappresenta la "opacità". Il colore di sfondo del secondo div è anche verde con il valore alfa di “0.4 ". Il valore alfa per il terzo div è “0.7 "con lo stesso colore verde.
Produzione:
Qui, puoi vedere che il primo paragrafo mostra più trasparenza del secondo paragrafo perché il valore alfa o opacità per il primo paragrafo è "0.2 "che significa che ha opacità" 20%". L'opacità del secondo paragrafo o il valore alfa è “0.4 "ed è meno trasparente del primo paragrafo. Nel colore di sfondo del terzo paragrafo, il valore Alpha è “0.7 "e noteresti che è meno trasparente. Nell'ultimo paragrafo, il colore di sfondo è il colore "verde" originale. Non abbiamo usato alcun valore alfa nell'ultima intestazione.
Esempio #3:
Per il terzo esempio, scriveremo di diverse titoli in HTML con "ID" e successivamente usa questi "ID" per dare diversi stili a queste intestazioni in CSS.
Codice CSS:
In questo codice CSS, cambieremo l'opacità del colore di sfondo di un colore e useremo anche il colore originale nel paragrafo successivo. Fare riferimento alla seguente immagine per il codice CSS:
Qui, utilizziamo l'ID paragrafo e quindi forniamo il colore di sfondo a tutti i paragrafi. Per "P1", abbiamo impostato il "RBGA (255, 0, 0, 0.3) "che è il codice del colore" rosso "con un valore alfa di" 0.3 ". Per "P11", usiamo lo stesso colore ma senza il valore alfa o opacità. Il "P2" è impostato come "RGBA (0, 255, 0, 0.4) "che è il codice del colore" verde "e il suo valore alfa è" 0.4 ". Successivamente, il "p22" è dello stesso colore "verde" senza valore alfa. Il valore RGBA "P3" è "(0. 0. 225, 0.5) "che è il colore" blu "con un valore alfa di" 0.5 ". Il "p33" ha il colore "blu" originale e non ha opacità. La "p5" ha il valore di opacità di "0.7 "e il codice colore è" RGBA (255, 255, 0, 0.7) "che rappresenta" giallo ". Il "p55" non contiene alcun valore alfa. Il colore "P6" è "rosa" con un valore di opacità di "0.8 "e il codice è scritto come" RGBA (255, 0, 255, 0.8) ". L'ultimo paragrafo, "p66", ha il "colore di sfondo" di "rosa" senza opacità.
Qui, il colore di sfondo del primo paragrafo è rosso ma con un valore di opacità di 0.3 che lo rende più trasparente. Il paragrafo successivo contiene il colore di sfondo rosso originale e puoi facilmente osservare la differenza tra il colore originale e il colore quando usiamo il valore di opacità. Nel terzo paragrafo, il colore di sfondo viene visualizzato come verde con un valore di opacità di “0.4 ". Nel quarto paragrafo, il colore di sfondo è "verde" senza alcun valore alfa. Viene visualizzato il colore "blu" sul quinto paragrafo e il suo valore di opacità è "0.5 ". Il colore di sfondo "blu" originale è anche mostrato nel paragrafo "sesto". Il paragrafo successivo mostra un colore "grigio" usato con un "0.Il valore di opacità da 6 "e questo grigio originale viene utilizzato anche nel paragrafo successivo come colore di sfondo. Il colore "giallo" ha "0.7 "opacità mentre" Cerise "ha" 0.8 ". Entrambi i colori originali sono anche visualizzati nei colori dello sfondo del paragrafo.
Conclusione
Questo tutorial è fornito per te in modo da poter imparare il concetto di opacità del colore di sfondo in CSS. Abbiamo imparato due metodi per modificare l'opacità: uno è utilizzando la proprietà "opacità" e l'altro è utilizzando "RGBA" in cui "alfa" viene utilizzato per l'impostazione del valore di trasparenza del colore di sfondo. Abbiamo mostrato i colori di sfondo con opacità o valore alfa e senza valore di opacità in dettaglio. Prova questi esempi e quindi usa questi valori di opacità nei codici.