CSS-bakgrunn vs bakgrunnsfarge

-taggen og deretter legge til en overskrift og avsnitt.

HTML

< div >

< h1 > LinuxHint < / h1 >

< s > Velkommen til vår nettside < / s >

< / div >

I CSS vil vi justere høyden på div som ' 100 % ' for å få det til å vises på hele siden og skriftstørrelsen på teksten som ' xx-stor '. Deretter setter du bakgrunnsfargen som ' aqua '.

CSS

div {

høyde : 100 % ;

skriftstørrelse : xx-stor ;

bakgrunnsfarge : aqua ;

}

På bildet nedenfor kan du se at bakgrunnsfargen er brukt:

CSS-bakgrunnsbilde-egenskap

« bakgrunnsbilde ”-egenskapen brukes til å sette ett eller flere bilder som bakgrunn for HTML-elementene. Du kan bruke denne egenskapen til å legge til forskjellige bakgrunnsbilder for forskjellige elementer.

Syntaks

Syntaksen til bakgrunnsbilde-egenskapen er:

bakgrunnsbilde: url()

Her gir du banen til bildet du vil sette som bakgrunn som et argument til ' url() '.

Eksempel

I fortsettelsen av forrige eksempel, legg til et bakgrunnsbilde i ' div ' klasse. Vi legger til nettadressen til bildet som ' url(img.jpg) ':

div {

...

bakgrunnsbilde : url ( img.jpg ) ;

}

Utdataene nedenfor indikerer at bakgrunnsbildet er lagt til:

Merk at bildet gjentas. For å løse dette problemet, sjekk ut neste eiendom.

CSS-repeterende bakgrunnsegenskap

Når du legger til et bilde som bakgrunn på en nettside, blir det gjentatt som standard. For å unngå denne gjentakelsen og angi mønsteret i henhold til ditt valg, ' bakgrunnsgjenta ” eiendom er utnyttet.

Syntaks

Syntaksen til bakgrunnsgjentakelsesegenskapen er:

bakgrunnsgjenta : gjenta | gjenta-x | gjenta-y | ingen gjentakelse

Beskrivelsen av de angitte verdiene for bakgrunnsgjentakelsesegenskapen er gitt nedenfor:

• gjenta: Den brukes til å gjenta bildet i begge retninger, vertikalt og horisontalt.
• gjenta-x: Den brukes til å stille inn repetisjonen av bildet bare horisontalt.
• gjenta-y: Den spesifiserer den vertikale repetisjonen av bildet.
• ikke-gjentakelse: Den brukes for å unngå repetisjon av bildet.

Eksempel

Her vil vi sette verdien av bakgrunnsgjenta-egenskapen som ' ingen gjentakelse ':

div {

...

bakgrunnsgjenta : ingen gjentakelse ;

}

Utfallet av koden ovenfor er gitt nedenfor. Du kan se at bildet ikke gjentas lenger:

CSS bakgrunn-posisjon Eiendom

For å angi posisjonen til bakgrunnsbildet, ' bakgrunnsposisjon ” eiendom brukes. Den lar deg justere bildet i forskjellige posisjoner som venstre topp, venstre senter, venstre bunn, høyre topp, høyre senter og mange flere.

Syntaks

Syntaksen til egenskapen bakgrunnsposisjon er:

bakgrunnsposisjon : verdi

I stedet for ' verdi ”, kan du spesifisere plasseringen av bildet.

Eksempel

Her vil vi sette bakgrunnsposisjonen som ' senter ':

div {

...

bakgrunnsposisjon : senter ;

}

I utdataene nedenfor vises bildet i midten av siden:

CSS-eiendom i bakgrunnsstørrelse

For å angi størrelsen på bakgrunnsbildet, ' bakgrunnsstørrelse ” eiendom brukes.

Syntaks

Bakgrunnsstørrelse har følgende syntaks:

bakgrunnsstørrelse : lengde|dekke

Følgende er beskrivelsen av verdiene til egenskapen i bakgrunnsstørrelse:

• lengde: Den brukes til å fikse bredden og høyden på bakgrunnsbildet.
• dekke: Den brukes til å justere bakgrunnsbildet i hele bakgrunnen.

Eksempel

Vi vil angi størrelsen på bakgrunnen som ' 100 % 'høyde og' 80 % ' bredde:

div {

...

bakgrunnsstørrelse : 100 % 80 % ;

}

Du kan se at bildet har endret størrelse basert på de angitte dimensjonene:

CSS-eiendom med bakgrunnsopprinnelse

« bakgrunnsopprinnelse ”-egenskapen brukes til å justere posisjoneringsområdet til bakgrunnsbildet. Bildet justeres i øvre venstre hjørne som standard.

Syntaks

Syntaksen til bakgrunnsopprinnelsesegenskapen er:

bakgrunnsopprinnelse : polstring-boks| kantboks | innholdsboks

Verdiene til bakgrunnsopprinnelsesegenskapen er beskrevet nedenfor:

• polstring-boks: Det er standardverdien for bakgrunnsopprinnelsesegenskapen som brukes til å justere posisjonen til bakgrunnsbildet i henhold til polstringskanten.
• kantboks: Den brukes til å sette bildet i henhold til kantfeltet til bildet.
• innholdsboks: Den brukes til å sette bakgrunnsbildet i samsvar med innholdet i bildet.

Merk: Egenskapen for bakgrunnsopprinnelse fungerer ikke hvis verdien til egenskapen for bakgrunnsvedlegg er satt som ' fikset '.

Eksempel

Lag først en kant rundt beholderen. Her vil vi fortsette det forrige eksemplet og sette utfyllingsverdien som ' 10 piksler '. Deretter justerer du kantbredden som ' 15 piksler ', stil som ' rygg ', og farge som ' rgb(1; 68; 68) '. Til slutt vil vi tilordne verdien av bakgrunnsopprinnelsesegenskapen som ' innholdsboks ':

div {

...

polstring : 10 piksler ;

grense : 15 piksler rygg rgb ( 1 , 68 , 68 ) ;

bakgrunnsopprinnelse : innholdsboks ;

}

Utfallet av koden ovenfor er gitt nedenfor. Du kan se at bildets posisjon er satt i henhold til innholdet i div:

CSS bakgrunnsklipp Eiendom

« bakgrunnsklipp egenskapen fungerer på elementets bakgrunnsfarge. Den lar deg kontrollere hvor langt en bakgrunnsfarge strekker seg utover et element, for eksempel elementets utfylling, dets kant og innholdet.

Syntaks

Syntaksen til bakgrunnsklipp-egenskapen er:

bakgrunnsopprinnelse : kantboks | polstring-boks | innholdsboks

Verdiene til bakgrunnsopprinnelsesegenskapen er beskrevet nedenfor:

• kantboks: Det er standardverdien for bakgrunnsopprinnelsesegenskapen som brukes til å angi bakgrunnsfargen bak grensen.
• polstring-boks: Den brukes til å justere fargen i polstringsboksen til elementet.
• innholdsboks: Den brukes til å angi bakgrunnsfarge i henhold til innholdet i elementet.

Eksempel

Vi fortsetter med forrige eksempel og endrer verdien av kantstilen til ' prikkete ” for å forstå egenskapen for bakgrunnsklipp. Etter det vil vi sette verdien av bakgrunnsklipp-egenskapen som ' polstring-boks ':

div {

...

bakgrunnsklipp : polstring-boks ;

}

Utgangen betyr at den hvite bakgrunnsfargen vises når kantkanten sluttet:

CSS-eiendom for bakgrunnsvedlegg

« bakgrunnsvedlegg ”-egenskapen brukes til å justere oppførselen eller bildet mens du ruller siden. Dens oppførsel kan settes til å rulle med andre elementer eller fikses.

Syntaks

Syntaksen til egenskapen for bakgrunnsvedlegg er:

bakgrunnsvedlegg : verdi

Du kan angi verdien for bakgrunnsvedlegg som ' fikset ' for å fikse bakgrunnsbildet eller ' bla ' for å la bildet rulle med siden.

Merk: Som standard er verdien for bakgrunnsvedleggsegenskapen satt som ' bla '.

Det kan sees at det tilførte bakgrunnsbildet ikke er statisk når vi har scrollet. La oss nå fikse dette problemet.

For å gjøre det setter vi verdien av bakgrunnsvedleggsegenskapen som ' fikset ':

div {

...

bakgrunnsvedlegg : fikset ;

}

Her er resultatet som viser at bildet er fikset:

Gå nå mot sammenligningen mellom bakgrunns- og bakgrunnsfargeegenskaper.

CSS-bakgrunn vs bakgrunnsfarge

Den gitte tabellen vil skille bakgrunns- og bakgrunnsfargeegenskapene på grunnlag av funksjonene deres:

Funksjoner	CSS bakgrunn	CSS bakgrunnsfarge
Type	Det er en super eiendom.	Det er en undereiendom av bakgrunnseiendom.
Funksjonalitet	Den setter alle bakgrunnsegenskaper.	Den setter bare bakgrunnsfargen.
Område	Den støtter alle bakgrunnsegenskaper	Den støtter kun bakgrunnsfargeegenskap
Nivå	Når du trenger å legge til flere bakgrunnsverdier, er det enkelt å bruke. Du kan angi verdiene for alle bakgrunnsegenskaper samtidig.	Den kan brukes når du bare trenger å legge til en enkelt bakgrunnsfarge.
Syntaks	bakgrunn: verdier (Verdiene er bg-color, bg-image og andre egenskaper)	bakgrunnsfarge: farge

Det har blitt forklart hvordan bakgrunnsfargeegenskaper skiller seg fra bakgrunnsegenskaper.

Konklusjon

CSS ' bakgrunn ”-egenskap er en stenografi-egenskap som brukes til å angi flere bakgrunnsverdier samtidig, for eksempel farge, bilde, posisjon, størrelse, opprinnelse og mer. På den andre siden, ' bakgrunnsfarge ” brukes kun for å legge til farge på bakgrunnen. I denne guiden har vi diskutert forskjellen mellom CSS-bakgrunnsegenskap og CSS-bakgrunnsfargeegenskap.