Fons CSS vs color de fons

i després afegirem un encapçalament i un paràgraf.

HTML

< div >

< h1 > LinuxHint < / h1 >

< pàg > Benvingut al nostre lloc web < / pàg >

< / div >

En CSS, ajustarem l'alçada del div com ' 100% ” perquè aparegui a tota la pàgina i la mida de la lletra del text com a “ xx-gran ”. Després d'això, establiu el color de fons com a ' aqua ”.

CSS

div {

alçada : 100% ;

mida de la font : xx-gran ;

color de fons : aqua ;

}

A la imatge proporcionada a continuació, podeu veure que s'aplica el color de fons:

Propietat CSS background-image

El ' imatge de fons ” s'utilitza per establir una o més imatges com a fons dels elements HTML. Podeu utilitzar aquesta propietat per afegir diferents imatges de fons per a diferents elements.

Sintaxi

La sintaxi de la propietat background-image és:

imatge de fons: url()

Aquí, doneu el camí de la imatge que voleu establir com a fons com a argument per al ' url() ”.

Exemple

A continuació de l'exemple anterior, afegiu una imatge de fons a la secció “ div ” classe. Afegirem l'URL de la imatge com a ' url(img.jpg) ”:

div {

...

imatge de fons : url ( img.jpg ) ;

}

La sortida proporcionada a continuació indica que la imatge de fons s'ha afegit correctament:

Tingueu en compte que la imatge es repeteix. Per resoldre aquest problema, consulteu la següent propietat.

Propietat CSS background-repeat

Quan afegiu una imatge com a fons en una pàgina web, es repeteix de manera predeterminada. Per evitar aquesta repetició i establir el patró segons la vostra elecció, el ' fons-repetició s'utilitza la propietat.

Sintaxi

La sintaxi de la propietat background-repeat és:

fons-repetició : repetir | repetir-x | repeat-y | no-repeat

La descripció dels valors indicats de la propietat de repetició de fons es dóna a continuació:

• repetir: S'utilitza per repetir la imatge en ambdues direccions, vertical i horitzontal.
• repetir-x: S'utilitza per configurar la repetició de la imatge només horitzontalment.
• repeat-i: Especifica la repetició vertical de la imatge.
• no-repeat: S'utilitza per evitar la repetició de la imatge.

Exemple

Aquí, establirem el valor de la propietat de repetició de fons com a ' no-repeat ”:

div {

...

fons-repetició : no-repeat ;

}

El resultat del codi proporcionat anteriorment es mostra a continuació. Podeu veure que la imatge ja no es repeteix:

Propietat CSS background-position

Per establir la posició de la imatge de fons, el botó “ posició de fons s'utilitza propietat. Us permet ajustar la imatge en diferents posicions, com ara la part superior esquerra, el centre esquerre, la part inferior esquerra, la part superior dreta, el centre dret i molts més.

Sintaxi

La sintaxi de la propietat background-position és:

posició de fons : valor

En el lloc de ' valor ”, podeu especificar la posició de la imatge.

Exemple

Aquí, establirem la posició de fons com a ' centre ”:

div {

...

posició de fons : centre ;

}

A la sortida següent, la imatge apareix al centre de la pàgina:

Propietat CSS background-size

Per establir la mida de la imatge de fons, el ' mida de fons ” s'utilitza propietat.

Sintaxi

La mida de fons té la sintaxi següent:

mida de fons : llargada|coberta

A continuació es mostra la descripció dels valors de la propietat background-size:

• llargada: S'utilitza per fixar l'amplada i l'alçada de la imatge de fons.
• coberta: S'utilitza per ajustar la imatge de fons a tot el fons.

Exemple

Establirem la mida del fons com ' 100% 'alçada i' 80% 'amplada:

div {

...

mida de fons : 100% 80% ;

}

Podeu veure que la imatge s'ha redimensionat en funció de les dimensions especificades:

Propietat CSS background-origin

El ' origen-de fons ” s'utilitza per ajustar l'àrea de posicionament de la imatge de fons. La imatge s'ajusta per defecte a la cantonada superior esquerra.

Sintaxi

La sintaxi de la propietat background-origin és:

origen-de fons : encoixinat-box| capsa de frontera | quadre de contingut

Els valors de la propietat background-origin es descriuen a continuació:

• caixa de farciment: És el valor predeterminat de la propietat d'origen de fons que s'utilitza per ajustar la posició de la imatge de fons segons la vora del farciment.
• caixa de vora: S'utilitza per configurar la imatge segons el quadre de vora de la imatge.
• quadre de contingut: S'utilitza per configurar la imatge de fons d'acord amb el contingut de la imatge.

Nota: La propietat background-origin no funciona si el valor de la propietat background-attachment s'estableix com a ' fixat ”.

Exemple

Primer, creeu una vora al voltant del contenidor. Aquí, continuarem amb l'exemple anterior i establirem el valor de farciment com a ' 10 píxels ”. Després d'això, ajusteu l'amplada de la vora com a ' 15 píxels ”, estil com “ carena ', i el color com ' rgb(1, 68, 68) ”. Al final, assignarem el valor de la propietat d'origen de fons com a ' quadre de contingut ”:

div {

...

farciment : 10 píxels ;

frontera : 15 píxels carena rgb ( 1 , 68 , 68 ) ;

origen-de fons : quadre de contingut ;

}

El resultat del codi proporcionat anteriorment es mostra a continuació. Podeu veure que la posició de la imatge s'estableix segons el contingut del div:

Propietat CSS background-clip

El ' clip de fons La propietat funciona amb el color de fons de l'element. Us permet controlar fins a quin punt un color de fons s'estén més enllà d'un element, com ara el farciment de l'element, la seva vora i el seu contingut.

Sintaxi

La sintaxi de la propietat background-clip és:

origen-de fons : capsa de frontera | encoixinat-box | quadre de contingut

Els valors de la propietat background-origin es descriuen a continuació:

• caixa de vora: És el valor predeterminat de la propietat background-origin que s'utilitza per establir el color de fons darrere de la vora.
• caixa de farciment: S'utilitza per ajustar el color dins de la caixa de farciment de l'element.
• quadre de contingut: S'utilitza per establir el color de fons segons el contingut de l'element.

Exemple

Continuarem amb l'exemple anterior i canviarem el valor de l'estil de vora a ' puntejada ” per entendre la propietat del clip de fons. Després d'això, establirem el valor de la propietat del clip de fons com a ' caixa de farciment ”:

div {

...

clip de fons : caixa de farciment ;

}

La sortida significa que el color de fons blanc apareix quan s'ha acabat la vora de la vora:

Propietat CSS background-attachment

El ' adjunt de fons ” s'utilitza per ajustar el comportament o la imatge mentre es desplaça per la pàgina. El seu comportament es pot configurar desplaçant-se amb altres elements o fixar-se.

Sintaxi

La sintaxi de la propietat background-attachment és:

adjunt de fons : valor

Podeu establir el valor de background-attachment com a ' fixat ' per arreglar la imatge de fons o ' desplaçar-se ” per permetre que la imatge es desplaça amb la pàgina.

Nota: De manera predeterminada, el valor de la propietat del fitxer adjunt de fons s'estableix com a ' desplaçar-se ”.

Es pot veure que la imatge de fons afegida no és estàtica quan ens hem desplaçat. Ara anem a solucionar aquest problema.

Per fer-ho, establim el valor de la propietat del fitxer adjunt de fons com a ' fixat ”:

div {

...

adjunt de fons : fixat ;

}

Aquest és el resultat que demostra que la imatge s'ha corregit:

Ara, dirigiu-vos a la comparació entre les propietats del color de fons i de fons.

Fons CSS vs color de fons

La taula donada diferenciarà les propietats de fons i color de fons en funció de les seves característiques:

Característiques	Fons CSS	Color de fons CSS
Tipus	És una súper propietat.	És una subpropietat de la propietat de fons.
Funcionalitat	Estableix totes les propietats de fons.	Estableix només el color de fons.
Interval	Admet totes les propietats de fons	Només admet la propietat de color de fons
Nivell	Quan necessiteu afegir diversos valors de fons, és fàcil d'utilitzar. Podeu establir els valors de totes les propietats de fons alhora.	Es pot utilitzar quan només cal afegir un únic color de fons.
Sintaxi	antecedents: valors (Els valors són bg-color, bg-image i altres propietats)	color de fons: color

S'ha explicat com les propietats del color de fons difereixen de les propietats de fons.

Conclusió

CSS ' fons La propietat ” és una propietat abreviada que s'utilitza per establir diversos valors de fons alhora, com ara el color, la imatge, la posició, la mida, l'origen i molt més. Per altra banda, ' color de fons ” només s'utilitza per afegir color al fons. En aquesta guia, hem parlat de la diferència entre la propietat de fons CSS i la propietat de color de fons de CSS.