Fundal CSS vs culoarea de fundal

și apoi vom adăuga un titlu și un paragraf.

HTML

< div >

< h1 > LinuxHint < / h1 >

< p > Bine ati venit pe site-ul nostru < / p >

< / div >

În CSS, vom ajusta înălțimea div-ului ca „ 100% ” pentru a-l face să apară pe întreaga pagină și dimensiunea fontului textului ca „ xx-mari ”. După aceea, setați culoarea de fundal ca „ acva ”.

CSS

div {

înălţime : 100% ;

marimea fontului : xx-mari ;

culoare de fundal : acva ;

}

În imaginea de mai jos, puteți vedea că culoarea de fundal este aplicată:

Proprietate CSS imagine de fundal

„ imagine de fundal ” este folosită pentru a seta una sau mai multe imagini ca fundal al elementelor HTML. Puteți utiliza această proprietate pentru a adăuga imagini de fundal diferite pentru diferite elemente.

Sintaxă

Sintaxa proprietății imagine de fundal este:

imagine de fundal: url()

Aici, dați calea imaginii pe care doriți să o setați ca fundal ca argument pentru „ url() ”.

Exemplu

În continuarea exemplului anterior, adăugați o imagine de fundal în „ div ” clasa. Vom adăuga adresa URL a imaginii ca „ url(img.jpg) ”:

div {

...

imagine de fundal : url ( img.jpg ) ;

}

Rezultatul furnizat mai jos indică faptul că imaginea de fundal a fost adăugată cu succes:

Rețineți că imaginea se repetă. Pentru a rezolva această problemă, verificați următoarea proprietate.

Proprietate CSS background-repeat

Când adăugați o imagine ca fundal pe o pagină web, aceasta se repetă în mod implicit. Pentru a evita această repetare și a seta modelul conform alegerii dvs., „ fundal-repetare ” proprietatea este utilizată.

Sintaxă

Sintaxa proprietății background-repeat este:

fundal-repetare : repeta | repeta-x | repeta-y | fără repetare

Descrierea valorilor declarate ale proprietății background-repeat este dată mai jos:

• repeta: Este utilizat pentru a repeta imaginea în ambele direcții, vertical și orizontal.
• repeta-x: Este folosit pentru a seta repetarea imaginii doar pe orizontală.
• repeta-y: Specifică repetarea verticală a imaginii.
• nerepetat: Este folosit pentru a evita repetarea imaginii.

Exemplu

Aici, vom seta valoarea proprietății background-repeat ca „ fără repetare ”:

div {

...

fundal-repetare : fără repetare ;

}

Rezultatul codului furnizat mai sus este prezentat mai jos. Puteți vedea că imaginea nu se mai repetă:

Proprietate CSS background-position

Pentru a seta poziția imaginii de fundal, butonul „ fundal-poziție ” este folosită proprietatea. Vă permite să reglați imaginea în diferite poziții, cum ar fi stânga sus, stânga centru, stânga jos, dreapta sus, dreapta centru și multe altele.

Sintaxă

Sintaxa proprietății background-position este:

fundal-poziție : valoare

In locul ' valoare ”, puteți specifica poziția imaginii.

Exemplu

Aici, vom seta poziția de fundal ca „ centru ”:

div {

...

fundal-poziție : centru ;

}

În rezultatul de mai jos, imaginea apare în centrul paginii:

Proprietate CSS background-size

Pentru a seta dimensiunea imaginii de fundal, „ dimensiunea fundalului ” este folosită proprietatea.

Sintaxă

Background-size are următoarea sintaxă:

dimensiunea fundalului : lungime|copertă

Mai jos este descrierea valorilor proprietății background-size:

• lungime: Este folosit pentru a fixa lățimea și înălțimea imaginii de fundal.
• acoperi: Este utilizat pentru a regla imaginea de fundal în întregul fundal.

Exemplu

Vom seta dimensiunea fundalului ca „ 100% „înălțimea și „ 80% ” latime:

div {

...

dimensiunea fundalului : 100% 80% ;

}

Puteți vedea că imaginea a fost redimensionată pe baza dimensiunilor specificate:

Proprietate CSS background-origin

„ origine-fond ” este utilizată pentru a regla zona de poziționare a imaginii de fundal. Imaginea este reglată implicit în colțul din stânga sus.

Sintaxă

Sintaxa proprietății background-origin este:

origine-fond : padding-box| cutie-chenar | caseta de conținut

Valorile proprietății background-origin sunt descrise mai jos:

• cutie de umplutură: Este valoarea implicită a proprietății de origine fundal utilizată pentru a ajusta poziția imaginii de fundal în funcție de marginea de umplutură.
• cutie-chenar: Este folosit pentru a seta imaginea în funcție de caseta de margine a imaginii.
• caseta de conținut: Este utilizat pentru a seta imaginea de fundal în conformitate cu conținutul imaginii.

Notă: Proprietatea background-origin nu funcționează dacă valoarea proprietății background-attachment este setată ca „ fix ”.

Exemplu

Mai întâi, creați o chenar în jurul containerului. Aici, vom continua exemplul anterior și vom seta valoarea de umplutură ca „ 10px ”. După aceea, ajustați lățimea chenarului ca „ 15px ”, stil ca “ creastă ”, și colorează ca „ rgb(1, 68, 68) ”. În cele din urmă, vom atribui valoarea proprietății background-origin ca „ caseta de conținut ”:

div {

...

căptușeală : 10px ;

frontieră : 15px creastă rgb ( 1 , 68 , 68 ) ;

origine-fond : caseta de conținut ;

}

Rezultatul codului furnizat mai sus este prezentat mai jos. Puteți vedea că poziția imaginii este setată în funcție de conținutul div:

Proprietate CSS background-clip

„ clip de fundal ” proprietatea funcționează pe culoarea de fundal a elementului. Vă permite să controlați cât de mult se întinde o culoare de fundal dincolo de un element, cum ar fi umplutura elementului, chenarul și conținutul acestuia.

Sintaxă

Sintaxa proprietății background-clip este:

origine-fond : cutie-chenar | padding-box | caseta de conținut

Valorile proprietății background-origin sunt descrise mai jos:

• cutie-chenar: Este valoarea implicită a proprietății background-origin utilizată pentru a seta culoarea de fundal în spatele chenarului.
• cutie de umplutură: Este utilizat pentru a regla culoarea în caseta de umplutură a elementului.
• caseta de conținut: Este folosit pentru a seta culoarea de fundal în funcție de conținutul elementului.

Exemplu

Vom continua exemplul anterior și vom schimba valoarea stilului de chenar în „ punctat ” pentru a înțelege proprietatea background-clip. După aceea, vom seta valoarea proprietății background-clip ca „ padding-box ”:

div {

...

clip de fundal : padding-box ;

}

Ieșirea înseamnă că culoarea de fundal albă apare când marginea marginii s-a terminat:

Proprietate CSS de fundal-atașament

„ atașament de fundal ” este folosită pentru a regla comportamentul sau imaginea în timpul derulării paginii. Comportamentul său poate fi setat derulând cu alte elemente sau fix.

Sintaxă

Sintaxa proprietății background-attachment este:

atașament de fundal : valoare

Puteți seta valoarea atașării de fundal ca „ fix ” pentru a remedia imaginea de fundal sau “ sul ” pentru a permite imaginii să defileze odată cu pagina.

Notă: În mod implicit, valoarea proprietății de atașament de fundal este setată ca „ sul ”.

Se poate observa că imaginea de fundal adăugată nu este statică atunci când am derulat. Acum să remediam această problemă.

Pentru a face acest lucru, setăm valoarea proprietății de atașament de fundal ca „ fix ”:

div {

...

atașament de fundal : fix ;

}

Iată rezultatul care demonstrează că imaginea a fost remediată:

Acum, îndreptați-vă spre comparația dintre proprietățile de fundal și culoarea de fundal.

Fundal CSS vs culoarea de fundal

Tabelul dat va diferenția proprietățile de fundal și culoarea de fundal pe baza caracteristicilor lor:

Caracteristici	Fundal CSS	Culoare de fundal CSS
Tip	Este o super proprietate.	Este o sub-proprietate a proprietății de fundal.
Funcționalitate	Setează toate proprietățile de fundal.	Setează doar culoarea de fundal.
Gamă	Acceptă toate proprietățile de fundal	Acceptă doar proprietatea de culoare de fundal
Nivel	Când trebuie să adăugați mai multe valori de fundal, este ușor de utilizat. Puteți seta valorile tuturor proprietăților de fundal simultan.	Poate fi utilizat atunci când trebuie să adăugați doar o singură culoare de fundal.
Sintaxă	fundal: valori (Valorile sunt bg-color, bg-image și alte proprietăți)	culoare de fundal: culoare

S-a explicat cum diferă proprietățile de culoare de fundal de proprietățile de fundal.

Concluzie

CSS „ fundal Proprietatea ” este o proprietate scurtă folosită pentru a seta mai multe valori de fundal simultan, cum ar fi culoarea, imaginea, poziția, dimensiunea, originea și multe altele. Pe de altă parte, ' culoare de fundal ” este folosit doar pentru a adăuga culoare fundalului. În acest ghid, am discutat diferența dintre proprietatea de fundal CSS și proprietatea de culoare de fundal CSS.