Opacità del testo CSS

L'opacità è definita in CSS come "trasparenza". L'opacità di testo è l'effetto di trasparenza che applichiamo a qualsiasi testo. Abbiamo due diverse proprietà in CSS per impostare l'opacità del testo. Per impostare l'opacità del testo, useremo la proprietà "opacità" e il valore alfa che determina l'opacità del testo in "RGBA". Utilizzando la proprietà Opacità e modificando il valore alfa in RGBA, possiamo regolare l'opacità del testo in CSS. L'opacità varia tra “0.0 "e" 1.0."Il colore" completamente trasparente "ha un valore di" 0.0 "mentre il colore" totalmente opaco "ha un valore di" 1.0 ". Useremo le proprietà CSS per modificare l'opacità del testo in questa guida.

Esempio n. 1: usando la proprietà opacità

Abbiamo bisogno di alcuni paragrafi per utilizzare la funzione di opacità in CSS. Faremo alcuni paragrafi HTML qui. Per fare ciò, dobbiamo prima costruire il file HTML. Visual Studio Code è il software che utilizzeremo per eseguire questi esempi. Puoi farlo in qualsiasi software come il blocco note. Stiamo facendo alcune classi "div" con nomi diversi nel corpo. All'interno di ogni div, stiamo creando un paragrafo con "

"Tag. Faremo tre div con nomi univoci come "T1", "T2" e "T3". Stiamo creando paragrafi all'interno di questi div. Di conseguenza, sono stati creati tre paragrafi. Useremo questo codice HTML anche per altri esempi. Ora andremo al file CSS e applicheremo l'opacità CSS al testo. Nell'elemento "Head" del codice HTML, abbiamo inoltre collegato il file CSS a questa pagina HTML.

Abbiamo impostato il colore "rosso" originale sull'intestazione usando la proprietà "colore" e stile questa intestazione come "corsivo". Quindi, usiamo il nome del primo div "T1" in cui abbiamo un paragrafo e impostiamo la sua "dimensione del carattere" su "16px". Usiamo il "rosso" per il carattere "colore". Ma nella riga successiva, stiamo usando la proprietà "opacità". Quindi, quando usiamo questa proprietà, aggiungerà un po 'di opacità all'effetto trasparenza del nostro colore di testo. Qui, stiamo impostando un “0.8 "valore a questa proprietà" opacità ". Per il prossimo “Div.T2 "paragrafo, abbiamo impostato lo stesso" marciatore "" 16px "e lo stesso" rosso "" rosso ". Ma questa volta il valore dell '"opacità" viene modificato in "0.5 "per il paragrafo del secondo div. Per il terzo e l'ultimo "div.t3 ", stiamo usando" 0.3 "come valore" opacità ".

Ecco l'output, vedi che il colore del testo appare con diversi valori di opacità. Il colore dell'intestazione è il colore rosso originale, ma il colore dei paragrafi appare con alcuni valori di opacità. Tutti e tre i paragrafi hanno valori di opacità diversi.

Esempio n. 2: usando il valore Alpha in RGBA

Qui, utilizzeremo i valori RGBA in cui "A" è per il valore alfa e questo valore alfa imposta l'opacità del testo. Innanzitutto, abbiamo semplicemente messo il valore RGB all'intestazione e il valore RGB che stiamo usando qui rappresenta il colore "viola". Quindi, utilizziamo la parola chiave "corsivo" per impostare lo "tipo di carattere" dell'intestazione. Lo abbiamo anche impostato come "famiglie di carattere" e utilizziamo il carattere "algerino" per questo. È allineato nel "centro" utilizzando la proprietà "allineate al testo".

Quindi, utilizzeremo il primo "div.T1 "e utilizzare il valore" RGBA ". Qui, mettiamo il valore "RGB" del colore viola e quindi impostiamo il suo valore alfa anche su "0.9 ". Successivamente, abbiamo impostato lo stesso valore "RGB" ma abbiamo cambiato il valore Alpha e impostarlo su "0.7 ". Inoltre, abbiamo un altro paragrafo Div e per quest'ultimo "Div.paragrafo t3 ", usiamo il" 0.5 "Valore Alpha che imposta la sua opacità su" 0.5 "valore.

Si noti nel risultato come cambia il colore del testo in base al valore alfa. Il colore dell'intestazione è il viola originale. Ma il colore dei paragrafi ha alcuni valori alfa che impostano la sua opacità. I valori di opacità in tutti e tre i paragrafi sono diversi.

Esempio # 3:

Innanzitutto, imposteremo il "colore di sfondo" di tutto il corpo e lo imposteremo su "nero". Quindi, utilizziamo di nuovo i valori RGBA in cui "A" sta per il valore alfa. Questo valore alfa determina l'opacità del testo come abbiamo discusso sopra. Per iniziare, aggiungiamo semplicemente il valore RGB all'intestazione, il numero RGB che stiamo usando qui simboleggia il colore "grigio chiaro". Stiamo usando il primo "Div.T1 "e il valore" RGBA "in cui stiamo inserendo il valore" RGB "dello stesso colore dell'intestazione e impostare il suo valore alfa su" 0.7 ". Successivamente, abbiamo impostato lo stesso valore "RGB" di prima. Questa volta, abbiamo cambiato il valore Alpha in "0.4 ". Abbiamo anche un altro paragrafo Div e usiamo il "0.Valore alfa 2 "per modificare l'opacità di quest'ultimo" Div.T3 "paragrafo a" 0.2 ".

Osserva come il colore del testo varia quando il valore alfa cambia. L'intestazione è il colore originale ma il colore dei paragrafi include i valori alfa che determinano la loro opacità. Tutti e tre i paragrafi hanno valori di opacità distinti.

Esempio # 4:

Stiamo creando nove diverse classi DIV qui con un nome univoco per ogni div e applichiamo tutti i valori di opacità su ciascun Div separatamente in CSS.

Stiamo disegnando l'intero corpo e stabilendo il testo nel "centro" della pagina. Quindi, tutti i paragrafi appaiono nel "centro". Abbiamo anche impostato "grassetto" per tutto il "corpo" usando "font-peso" e impostiamo le dimensioni del carattere o del testo su "20px". La nostra intestazione apparirà nel colore originale "marrone" mentre stiamo impostando questo colore nella proprietà "colore". L '"algerino" è la "famiglia di carattere" per l'intestazione. Impostamo lo stesso colore per tutti i div usando la proprietà "colore". In tutti i paragrafi di Div, abbiamo cambiato il valore della "opacità". In ogni Div riduciamo il valore dell'opacità di uno di questi per altri div impostamo il valore dell '"opacità" su "0.9 ". Quindi, per il prossimo Div stiamo impostando il valore di questa proprietà di opacità su “0.8 ". Per il terzo div, stiamo usando “0.Valore di opacità da 7 "e così via. In questo modo, stiamo cambiando i valori di opacità ogni volta per ogni div.

Qui, guarda l'output di seguito, i valori di opacità del testo iniziano da “0.9 "e termina a" 0.1 ". Il colore originale viene utilizzato anche qui per l'intestazione e tutti i paragrafi contengono valori di opacità.

Conclusione:

Abbiamo creato questa guida per te in cui cambiamo l'opacità del testo e impariamo come modificare l'opacità del testo in CSS. Abbiamo spiegato qui che l'opacità viene utilizzata per dare un effetto trasparente al testo. Abbiamo anche esplorato le proprietà CSS con cui possiamo cambiare l'opacità del testo. Abbiamo descritto e dimostrato come utilizzare la proprietà "opacità" e il valore "alfa" di RGBA per modificare l'opacità del testo.