Come il nome stesso afferma il colore di sfondo La proprietà determina il colore di sfondo di qualsiasi elemento. Può essere usato per cambiare il colore di sfondo di un singolo elemento, più elementi, intera pagina o intero documento.

In CSS vari valori possono essere assegnati al colore di sfondo Proprietà come elencato qui sotto:

• Un nome di colore I.e. rosso, giallo, verde, ecc.,
• I valori di colore esadecimale i.e. #FF0000, 00FF00, ecc.
• Il valore RGB come RGB (255, 0, 0), ecc.
• I valori HSL come (55, 45, 55), ecc.

Questo articolo presenterà una panoramica generale della proprietà in background. Discuterà su come assegnare valori diversi alla proprietà.

Come impostare il colore di sfondo usando i nomi dei colori

In CSS possiamo impostare il colore di sfondo usando nomi di colori come rosso, verde, blu, ecc.

Esempio 1: L'esempio seguente imposterà il colore di sfondo per l'intera pagina utilizzando "Valore del colore colore":

Benvenuti in Linuxhint.com

Paragrafo campione

Lo snippet sopra specifica il colore di sfondo usando CSS interno. Verrà visualizzato il seguente output:

Come impostare il colore di sfondo usando il codice colore esadecimale

In CSS il colore di sfondo può essere assegnato utilizzando valori di colore esadecimale. Il valore del colore esadecimale è costituito da a "#" simbolo seguito da tre o sei cifre.

Esempio 2: Lo snippet di seguito utilizzato utilizza il codice colore esadecimale per modellare il colore di sfondo dei tag di paragrafo usando lo stile interno e il colore di sfondo di

Usando CSS in linea:

Colore di sfondo usando il codice di colore esadecimale

Benvenuti in Linuxhint.com

Benvenuti in Linuxhint.com

Di conseguenza, produce il seguente output:

Come impostare il colore di sfondo utilizzando il codice colore RGB

I codici a colori RGB possono essere utilizzati per impostare il colore di sfondo di un elemento. Il codice colore RGB determina il colore usando i valori numerici varia da 0 a 255. Il colore RGB utilizza tre colori principali i.e. (rosso, verde e blu) per generare combinazioni di colori diverse.

Esempio 3: Il seguente esempio creerà un file CSS esterno per impostare il colore di sfondo di vari elementi. Utilizza i codici a colori RGB per applicare il colore di sfondo.

File CSS:

corpo
Background-color: RGB (212, 212, 212);

H1
Background-color: RGB (0, 144, 158);

P
Background-color: RGB (137, 210, 236);

File html:

Colori di sfondo utilizzando il codice colore RGB

Benvenuti in Linuxhint.com

Benvenuti in Linuxhint.com

Benvenuti in Linuxhint.com

Il codice sopra genere genererà il seguente risultato:

Come impostare il colore di sfondo utilizzando il codice colore RGBA

Un parametro aggiuntivo Alpha (A) può essere aggiunto al codice colore RGB che determina l'opacità di un colore. Il valore del parametro Alpha si trova tra 0.0 a 1.0.

Esempio 4: Il codice indicato di seguito ha esteso un po 'l'esempio precedente e ha aggiunto anche il valore per il parametro Alpha:

File CSS:

corpo
Background-color: RGBA (212, 212, 212, 0.1);

H1
Background-color: RGBA (0, 144, 158, 0.1);

P
Background-color: RGBA (137, 210, 236, 0.1);

File html:

Colori di sfondo utilizzando il codice colore RGB

Benvenuti in Linuxhint.com

Benvenuti in Linuxhint.com

Benvenuti in Linuxhint.com

L'unica modifica nel precedente esempio (RGB) e questo (RGBA) è il parametro Alpha. Confronta entrambi gli output noterai una chiara differenza:

È così che ha funzionato il parametro Alpha.

Come impostare il colore di sfondo utilizzando il codice colore HSL

CSS supporta un'altra convention di colore chiamata HSL. HSL imposta un colore rispetto alla tonalità, alla saturazione e alla leggerezza.

Esempio 5: Considera il seguente codice che specifica come funziona la Convenzione HSL:

Colori di sfondo utilizzando il codice colore HSL

Benvenuti in Linuxhint.com

Benvenuti in Linuxhint.com

Il codice sopra ha implementato il colore di base

E

Elemento usando la convenzione di colore HSL. Verrà visualizzato il seguente output:

Come impostare il colore di sfondo utilizzando il codice colore HSLA

Il parametro Alpha può essere utilizzato con la convenzione di colore HSL per specificare l'opacità di un colore.

Esempio 6: Estendiamo un po 'di più il codice di cui sopra e aggiungiamo il parametro Alpha in HSL:

Colori di sfondo utilizzando il codice colore HSLA

Benvenuti in Linuxhint.com

Benvenuti in Linuxhint.com

L'output dimostrerà che il parametro Alpha ha aggiunto l'opacità al colore di fondo come mostrato di seguito:

Conclusione

CSS ha utilizzato una proprietà di fondo per implementare il colore di fondo su un elemento, una pagina, ecc. Il colore di sfondo può essere assegnato utilizzando più modi come specificando il nome del colore, il valore esadecimale, il valore RGB, ecc.

Questo articolo ha considerato le convenzioni di colore multiplo per la proprietà di sfondo. Fornisce una guida dettagliata su come applicare il colore di sfondo usando "Nome colore", "Valori esadecimali", "RGB, Codici a colori RGBA" e "HSL, Codici a colori HSLA".