CSS fornisce proprietà diverse per modellare gli elementi HTML. Queste proprietà sono utilizzate per scopi diversi, come l'aggiunta di un'immagine e un colore di sfondo e l'impostazione della larghezza e dell'altezza degli elementi HTML. Queste proprietà includono margine, colore, larghezza, altezza, sfondo, colore di sfondo e molti altri. Più specificamente, la proprietà di sfondo e colore di sfondo viene utilizzata per impostare lo sfondo degli elementi HTML.

In questo manuale, impareremo in dettaglio la differenza tra proprietà di background e colore di fondo.

Iniziamo!

Proprietà di fondo CSS

Per regolare lo sfondo di qualsiasi elemento HTML, il CSS "sfondo"La proprietà viene utilizzata. È una proprietà stensa di altre otto proprietà, il che significa che puoi usarle tutte in una riga. Quelle altre proprietà sono:

• colore di sfondo
• immagine di sfondo
• posizione in background
• Size di sfondo
• Ripeat di sfondo
• origine background
• Background-clip
• attacco di background

Sintassi

Ecco la sintassi della proprietà in background:

Sfondo: posizione dell'immagine colore/dimensione Ripetere l'origine Clip Allegato

Passiamo alla spiegazione di tutte le proprietà sopra menzionate una ad una.

Proprietà CSS in background

Usando il "colore di sfondo"Proprietà, è possibile impostare il colore dello sfondo. Il colore apparirà dietro gli elementi HTML.

Sintassi

La sintassi della proprietà in background-color è:

Sfondo: colore

Al posto di "colore", Puoi impostare il colore dello sfondo che vuoi apparire dietro gli elementi.

Esempio

Innanzitutto, nel file HTML, creeremo un contenitore utilizzando il tag e quindi aggiungeremo un titolo e un paragrafo.

Html

Linuxhint

Benvenuti sul nostro sito web

In CSS, regoleremo l'altezza del div come "100%"Per farlo apparire su tutta la pagina e il carattere del testo come"xx-grande". Dopodiché, imposta il colore di sfondo come "Aqua".

CSS

div
Altezza: 100%;
Font-size: xx-large;
Background-color: Aqua;

Nell'immagine sotto fornita, puoi vedere che viene applicato il colore di sfondo:

Proprietà CSS-Background-Image

IL "immagine di sfondo"La proprietà viene utilizzata per impostare una o più immagini come sfondo degli elementi HTML. È possibile utilizzare questa proprietà per aggiungere immagini di sfondo diverse per elementi diversi.

Sintassi

La sintassi della proprietà dell'immagine di background è:

Imaga di sfondo: url ()

Qui, dai il percorso dell'immagine che si desidera impostare come sfondo come argomento al "url ()".

Esempio

In continuazione dell'esempio precedente, aggiungi un'immagine di sfondo in "div" classe. Aggiungeremo l'URL dell'immagine come "URL (img.jpg)":

div
..
Immagina di background: URL (IMG.jpg);

L'output sotto fornito indica che l'immagine di sfondo è stata aggiunta correttamente:

Si noti che l'immagine viene ripetuta. Per risolvere questo problema, controlla la proprietà successiva.

Proprietà CSS Background Repeat

Quando si aggiunge un'immagine come sfondo su una pagina Web, viene ripetuta per impostazione predefinita. Per evitare questa ripetizione e impostare il modello in base alla tua scelta, il "Ripeat di sfondo"La proprietà viene utilizzata.

Sintassi

La sintassi della proprietà di ripetizione di sfondo è:

Ripeat sfondo: ripetizione | ripetizione-x | ripetizione | no-repeat

Di seguito è riportata la descrizione dei valori indicati della proprietà di repetti di background:

• ripetere: Viene utilizzato per ripetere l'immagine in entrambe le direzioni, verticale e orizzontale.
• ripetizione-x: Viene utilizzato per impostare la ripetizione dell'immagine solo in orizzontale.
• Ripeti-y: Specifica la ripetizione verticale dell'immagine.
• No-REPEAT: È usato per evitare la ripetizione dell'immagine.

Esempio

Qui, imposteremo il valore della proprietà di repeat di background come "no-ripeat":

div
..
Ripeat background: no-ripetizione;

Il risultato del codice sopra fornito è riportato di seguito. Puoi vedere che l'immagine non si ripete più:

Proprietà CSS in coopizione in background

Per impostare la posizione dell'immagine di sfondo, il “posizione in background"La proprietà viene utilizzata. Ti consente di regolare l'immagine in diverse posizioni come la parte superiore sinistra, il centro a sinistra, il basso a sinistra, la parte superiore destra, il centro destro e molti altri.

Sintassi

La sintassi della proprietà in posizione di background è:

Posizione di background: valore

Al posto di "valore", È possibile specificare la posizione dell'immagine.

Esempio

Qui, imposteremo la posizione di background come "centro":

div
..
Posizione di background: centro;

Nell'output di seguito, l'immagine appare al centro della pagina:

Proprietà CSS di dimensioni background

Per impostare le dimensioni dell'immagine di sfondo, il “Size di sfondo"La proprietà viene utilizzata.

Sintassi

Le dimensioni di sfondo hanno la seguente sintassi:

Size di sfondo: lunghezza | Copertura

Di seguito è riportata la descrizione dei valori della proprietà delle dimensioni di uno sfondo:

• lunghezza: Viene utilizzato per correggere la larghezza e l'altezza dell'immagine di sfondo.
• copertina: Viene utilizzato per regolare l'immagine di sfondo in tutto lo sfondo.

Esempio

Imposteremo le dimensioni dello sfondo come "100%”Altezza e"80%" larghezza:

div
..
Size di background: 100% 80%;

Puoi vedere che l'immagine è stata ridimensionata in base alle dimensioni specificate:

Proprietà di origine in background CSS

IL "origine background"La proprietà viene utilizzata per regolare l'area di posizionamento dell'immagine di sfondo. L'immagine viene regolata nell'angolo in alto a sinistra come impostazione predefinita.

Sintassi

La sintassi della proprietà dell'origina di sfondo è:

Origina di sfondo: padding-box | border-box | Content-Box

I valori della proprietà di origine in background sono descritti di seguito:

• Padding-Box: È il valore predefinito della proprietà di origine in background utilizzata per regolare la posizione dell'immagine di sfondo in base al bordo di imbottitura.
• Border-Box: Viene utilizzato per impostare l'immagine in base alla cassetta del bordo dell'immagine.
• Content-Box: Viene utilizzato per impostare l'immagine di sfondo in conformità con il contenuto dell'immagine.

Nota: La proprietà dell'origina di background non funziona se il valore della proprietà di attacco di background è impostato come "fisso".

Esempio

Innanzitutto, crea un bordo attorno al contenitore. Qui continueremo l'esempio precedente e imposteremo il valore di imbottitura come "10px". Successivamente, regola la larghezza del bordo come "15px", Stile come"cresta”, E colore come"RGB (1, 68, 68)". Alla fine, assegneremo il valore della proprietà di origine in background come "Content-Box":

div
..
imbottitura: 10px;
Bordo: 15px Ridge RGB (1, 68, 68);
ORIGINA SCHEDA: contenuto-box;

Il risultato del codice sopra fornito è riportato di seguito. Puoi vedere che la posizione dell'immagine è impostata in base al contenuto del div:

Proprietà CSS Background-clip

IL "Background-clip"La proprietà funziona sul colore di sfondo dell'elemento. Ti consente di controllare fino a che punto un colore di sfondo si estende oltre un elemento, come l'imbottitura dell'elemento, il suo bordo e il suo contenuto.

Sintassi

La sintassi della proprietà in background-clip è:

Origina di sfondo: Border-Box | Padding-Box | Content-Box

I valori della proprietà di origine in background sono descritti di seguito:

• Border-Box: È il valore predefinito della proprietà di origine sfondo utilizzata per impostare il colore di sfondo dietro il bordo.
• Padding-Box: Viene utilizzato per regolare il colore all'interno della scatola di imbottitura dell'elemento.
• Content-Box: Viene utilizzato per impostare il colore di sfondo in base al contenuto dell'elemento.

Esempio

Continueremo l'esempio precedente e cambieremo il valore dello stile di confine in "punteggiato"Per comprendere la proprietà di clip di background. Successivamente, imposteremo il valore della proprietà in background come "Padding-Box":

div
..
Sfondo-clip: padding-box;

L'uscita significa che il colore di sfondo bianco si presenta quando il bordo è terminato:

Proprietà di attacco di fondo CSS

IL "attacco di background"La proprietà viene utilizzata per regolare il comportamento o l'immagine mentre scorre la pagina. Il suo comportamento può essere impostato scorrere con altri elementi o fissato.

Sintassi

La sintassi della proprietà di attacco di fondo è:

Attacco di fondo: valore

Puoi impostare il valore dell'attacco di fondo come "fisso"Per correggere l'immagine di sfondo o"scorrere"Per consentire all'immagine di scorrere con la pagina.

Nota: Per impostazione predefinita, il valore della proprietà di attacco di fondo è impostato come "scorrere".

Si può vedere che l'immagine di sfondo aggiunta non è statica quando abbiamo scorrere. Ora risolviamo questo problema.

Per fare ciò, abbiamo impostato il valore della proprietà di attacco di fondo come "fisso":

div
..
Attacco di background: fisso;

Ecco il risultato che dimostra che l'immagine è stata fissata:

Ora, dirigiti verso il confronto tra le proprietà di sfondo e color background.

Sfondo CSS contro sfondo

La tabella data differenzierà le proprietà di sfondo e color sfondo sulla base delle loro caratteristiche:

Caratteristiche	Sfondo CSS	CSS Background-color
Tipo	È una super proprietà.	È una sotto-proprietà di proprietà in background.
Funzionalità	Imposta tutte le proprietà di sfondo.	Imposta solo il colore di sfondo.
Allineare	Supporta tutte le proprietà di fondo	Supporta solo proprietà di base a base di background
Livello	Quando è necessario aggiungere più valori di sfondo, è facile da usare. È possibile impostare i valori di tutte le proprietà di fondo contemporaneamente.	Può essere utilizzato quando è necessario aggiungere solo un singolo colore di sfondo.
Sintassi	Background: valori (I valori sono BG-color, Image BG e altre proprietà)	Sfondo: colore

È stato spiegato in che modo le proprietà di base a base di background differiscono dalle proprietà di sfondo.

Conclusione

CSS "sfondo"La proprietà è una proprietà stenorta utilizzata per impostare più valori di sfondo contemporaneamente, come colore, immagine, posizione, dimensioni, origine e altro ancora. D'altra parte, "colore di sfondo"Viene utilizzato solo per aggiungere colore allo sfondo. In questa guida, abbiamo discusso della differenza tra la proprietà di fondo CSS e la proprietà CSS in background.