Sfondo CSS vs colore di sfondo

CSS fornisce diverse proprietà per lo stile degli elementi HTML. Queste proprietà vengono utilizzate per diversi scopi, come l'aggiunta di un'immagine di sfondo e di un colore e l'impostazione della larghezza e dell'altezza degli elementi HTML. Queste proprietà includono margine, colore, larghezza, altezza, sfondo, colore di sfondo e molte altre. Più in particolare, la proprietà background e background-color viene utilizzata per impostare lo sfondo degli elementi HTML.

In questo manuale impareremo in dettaglio la differenza tra le proprietà del colore di sfondo e di sfondo.

Iniziamo!

Sfondo CSS Proprietà

Per regolare lo sfondo di qualsiasi elemento HTML, il CSS ' sfondo ” proprietà è utilizzata. È una proprietà abbreviata di altre otto proprietà, il che significa che puoi usarle tutte in una riga. Queste altre proprietà sono:

colore di sfondo
immagine di sfondo
posizione di sfondo
dimensione dello sfondo
sfondo ripetuto
origine di fondo
clip di sfondo
sfondo-allegato

Sintassi

Ecco la sintassi della proprietà background:

sfondo: posizione/dimensione dell'immagine a colori allegato clip origine ripetizione

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

Proprietà CSS colore di sfondo

Usando il ' colore di sfondo ” è possibile impostare il colore dello sfondo. Il colore apparirà dietro gli elementi HTML.

Sintassi

La sintassi della proprietà background-color è:

colore di sfondo : colore

Al posto di ' colore ”, puoi impostare il colore dello sfondo che vuoi far apparire dietro gli elementi.

Esempio

Innanzitutto, nel file HTML, creeremo un contenitore utilizzando il tag

e quindi aggiungeremo un'intestazione e un paragrafo.

HTML

< div >

< h1 > LinuxSuggerimento < / h1 >

< p > Benvenuti sul nostro sito web < / p >

< / div >

In CSS, regoleremo l'altezza del div come ' 100% ” per farlo apparire su tutta la pagina e la dimensione del carattere del testo come “ xx-grande ”. Successivamente, imposta il colore di sfondo come ' acqua ”.

CSS

div {

altezza : 100% ;

dimensione del font : xx-grande ;

colore di sfondo : acqua ;

}

Nell'immagine fornita di seguito, puoi vedere che il colore di sfondo è applicato:

CSS immagine di sfondo Proprietà

Il ' immagine di sfondo ” 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à background-image è:

immagine di sfondo: url()

Qui, fornisci il percorso dell'immagine che vuoi impostare come sfondo come argomento al ' URL() ”.

Esempio

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

div {

...

immagine di sfondo : URL ( img.jpg ) ;

}

L'output fornito di seguito 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 di ripetizione in background

Quando aggiungi un'immagine come sfondo a una pagina web, viene ripetuta per impostazione predefinita. Per evitare questa ripetizione e impostare lo schema secondo la propria scelta, il “ sfondo ripetuto ” proprietà è utilizzata.

Sintassi

La sintassi della proprietà background-repeat è:

sfondo ripetuto : ripetere | ripetere-x | ripetere-y | senza ripetizione

Di seguito è riportata la descrizione dei valori dichiarati della proprietà background-repeat:

ripetere: Viene utilizzato per ripetere l'immagine in entrambe le direzioni, verticale e orizzontale.
ripetere-x: Serve per impostare la ripetizione dell'immagine solo orizzontalmente.
ripeto: Specifica la ripetizione verticale dell'immagine.
non ripetere: Serve per evitare la ripetizione dell'immagine.

Esempio

Qui imposteremo il valore della proprietà background-repeat come ' senza ripetizione ”:

div {

...

sfondo ripetuto : senza ripetizione ;

}

Di seguito si riporta l'esito del suddetto codice. Puoi vedere che l'immagine non viene più ripetuta:

Proprietà CSS in background

Per impostare la posizione dell'immagine di sfondo, il ' posizione di sfondo viene utilizzata la proprietà. Ti consente di regolare l'immagine in diverse posizioni come in alto a sinistra, al centro a sinistra, in basso a sinistra, in alto a destra, al centro a destra e molti altri.

Sintassi

La sintassi della proprietà background-position è:

posizione di sfondo : valore

Al posto di ' valore ”, è possibile specificare la posizione dell'immagine.

Esempio

Qui imposteremo la posizione dello sfondo come ' centro ”:

div {

...

posizione di sfondo : centro ;

}

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

Proprietà CSS di dimensione dello sfondo

Per impostare la dimensione dell'immagine di sfondo, il ' dimensione dello sfondo viene utilizzata la proprietà.

Sintassi

La dimensione dello sfondo ha la seguente sintassi:

dimensione dello sfondo : lunghezza|copertina

Di seguito è riportata la descrizione dei valori della proprietà background-size:

lunghezza: Viene utilizzato per correggere la larghezza e l'altezza dell'immagine di sfondo.
coperchio: Viene utilizzato per regolare l'immagine di sfondo nell'intero sfondo.

Esempio

Imposteremo la dimensione dello sfondo come ' 100% ' altezza e ' 80% ' larghezza:

div {

...

dimensione dello sfondo : 100% 80% ;

}

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

Proprietà CSS di origine in background

Il ' origine di fondo 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à background-origin è:

origine di fondo : imbottitura-box| scatola di confine | casella di contenuto

I valori della proprietà background-origin sono descritti di seguito:

imbottitura: È il valore predefinito della proprietà background-origin utilizzata per regolare la posizione dell'immagine di sfondo in base al bordo di riempimento.
scatola di confine: Viene utilizzato per impostare l'immagine in base al riquadro del bordo dell'immagine.
casella dei contenuti: Viene utilizzato per impostare l'immagine di sfondo in base al contenuto dell'immagine.

Nota: La proprietà background-origin non funziona se il valore della proprietà background-attachment è impostato su ' fisso ”.

Esempio

Innanzitutto, crea un bordo attorno al contenitore. Qui, continueremo l'esempio precedente e imposteremo il valore di riempimento come ' 10px ”. Successivamente, regola la larghezza del bordo come ' 15px ”, stile come “ cresta ”, e colora come “ RGB(1, 68, 68) ”. Alla fine, assegneremo il valore della proprietà background-origin come ' casella di contenuto ”:

div {

...

imbottitura : 10px ;

confine : 15px cresta rgb ( 1 , 68 , 68 ) ;

origine di fondo : casella di contenuto ;

}

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

Proprietà CSS clip di sfondo

Il ' clip di sfondo 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 il riempimento dell'elemento, il suo bordo e il suo contenuto.

Sintassi

La sintassi della proprietà background-clip è:

origine di fondo : scatola di confine | imbottitura-box | casella di contenuto

I valori della proprietà background-origin sono descritti di seguito:

scatola di confine: È il valore predefinito della proprietà background-origin utilizzata per impostare il colore di sfondo dietro il bordo.
imbottitura: Viene utilizzato per regolare il colore all'interno della scatola di riempimento dell'elemento.
casella dei contenuti: 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 del bordo in ' punteggiato ” per comprendere la proprietà del clip di sfondo. Successivamente, imposteremo il valore della proprietà della clip di sfondo come ' imbottitura ”:

div {

...

clip di sfondo : imbottitura ;

}

L'output indica che il colore di sfondo bianco viene visualizzato quando il bordo del bordo è terminato:

CSS background-allegato Proprietà

Il ' sfondo-allegato ” viene utilizzata per regolare il comportamento o l'immagine durante lo scorrimento della pagina. Il suo comportamento può essere impostato scorrendo con altri elementi o fisso.

Sintassi

La sintassi della proprietà background-attachment è:

sfondo-allegato : valore

È possibile impostare il valore di background-attachment 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à background-attachment è impostato su ' scorrere ”.

Si può vedere che l'immagine di sfondo aggiunta non è statica durante lo scorrimento. Ora risolviamo questo problema.

Per fare ciò, impostiamo il valore della proprietà background-attachment come ' fisso ”:

div {

...

sfondo-allegato : fisso ;

}

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

Ora, vai verso il confronto tra le proprietà dello sfondo e del colore di sfondo.