CSS gir forskjellige egenskaper for å style HTML -elementene. Disse egenskapene brukes til forskjellige formål, for eksempel å legge til et bakgrunnsbilde og farge og sette bredden og høyden på HTML -elementene. Disse egenskapene inkluderer margin, farge, bredde, høyde, bakgrunn, bakgrunnsfarge og mange flere. Mer spesifikt brukes bakgrunns- og bakgrunnsfargede egenskaper til å stille bakgrunnen for HTML-elementene.

I denne håndboken lærer vi forskjellen mellom bakgrunns- og bakgrunnsfargede egenskaper i detalj.

La oss begynne!

CSS bakgrunnseiendom

For å justere bakgrunnen til ethvert HTML -element, CSS “bakgrunn”Eiendom brukes. Det er en shorthand -eiendom med åtte flere eiendommer, noe som betyr at du kan bruke dem alle på en linje. De andre egenskapene er:

• bakgrunnsfarge
• bakgrunnsbilde
• Bakgrunnsposisjon
• bakgrunnsstørrelse
• Bakgrunnsrepetitt
• Bakgrunn-opprinnelse
• Bakgrunnsklipp
• Bakgrunnsinnveksling

Syntaks

Her er syntaks for bakgrunnsegenskapen:

Bakgrunn: Fargebildeposisjon/størrelse Gjenta opprinnelsesklippfeste

La oss flytte til forklaringen av alle ovennevnte egenskaper en etter en.

CSS bakgrunnsfarge eiendom

Bruker "bakgrunnsfarge”Eiendom, du kan stille inn bakgrunnen på bakgrunnen. Fargen vises bak HTML -elementene.

Syntaks

Syntaksen til bakgrunnsfargede egenskaper er:

Bakgrunnsfarge: Farge

I stedet for “farge”, Kan du angi fargen på bakgrunnen du vil vises bak elementene.

Eksempel

Først, i HTML -filen, oppretter vi en beholder ved hjelp av taggen og legger deretter til en overskrift og avsnitt.

Html

Linuxhint

Velkommen til nettstedet vårt

I CSS vil vi justere høyden på DIV som "100%”For å få det til å vises på hele siden og fontstørrelse av teksten som“xx-stor”. Sett etter det bakgrunnsfargen som "Aqua”.

CSS

div
Høyde: 100%;
Font-størrelse: XX-Large;
Bakgrunnsfarge: Aqua;

I det undervernede bildet kan du se at bakgrunnsfargen brukes:

CSS bakgrunnsbildeegenskap

“bakgrunnsbilde”Eiendom brukes til å angi 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 egenskapen til bakgrunnsbilde er:

Bakgrunnsbilde: URL ()

Her, gi banen til bildet du vil angi som bakgrunn som et argument for "URL ()”.

Eksempel

I fortsettelse av det forrige eksempelet, legg til et bakgrunnsbilde i "div”Klasse. Vi vil legge til nettadressen til bildet som "URL (IMG.jpg)”:

div
..
Bakgrunnsbilde: URL (IMG.jpg);

Den undervernede utgangen indikerer at bakgrunnsbildet har blitt lagt til:

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

CSS bakgrunnsrepeter eiendom

Når du legger til et bilde som bakgrunn på en webside, blir det gjentatt som standard. For å unngå denne repetisjonen og sette mønsteret i henhold til ditt valg, "Bakgrunnsrepetitt”Eiendom brukes.

Syntaks

Syntaksen til den bakgrunnsrepeterende egenskapen er:

Bakgrunnsrepetitt: Repeat | Repeat-X | Repeat-Y | No-Repeat

Beskrivelsen av de uttalte verdiene til den bakgrunnsrepeterende egenskapen er gitt nedenfor:

• gjenta: Det brukes til å gjenta bildet i begge retninger, vertikalt og horisontalt.
• Repeat-x: Det brukes til å sette repetisjonen av bildet bare horisontalt.
• gjenta: Den spesifiserer den vertikale repetisjonen av bildet.
• Ingen repetisjon: Det brukes til å unngå repetisjon av bildet.

Eksempel

Her vil vi sette verdien av den bakgrunnsrepeterende egenskapen som “Ingen repeter”:

div
..
Bakgrunnsrepetitt: No-Repeteat;

Utfallet av ovennevnte kode er gitt nedenfor. Du kan se at bildet ikke gjentas lenger:

CSS bakgrunnsstillingseiendom

For å sette plasseringen av bakgrunnsbildet, “Bakgrunnsposisjon”Eiendom brukes. Det lar deg justere bildet i forskjellige posisjoner som venstre topp, venstre sentrum, venstre bunn, høyre topp, høyre sentrum og mange flere.

Syntaks

Syntaksen til egenskapen til bakgrunnsstilling er:

Bakgrunnsposisjon: Verdi

I stedet for “verdi”, Kan du spesifisere posisjonen til bildet.

Eksempel

Her vil vi sette bakgrunnsposisjonen som “senter”:

div
..
Bakgrunnsposisjon: sentrum;

I utgangen nedenfor vises bildet i midten av siden:

CSS bakgrunnsstørrelse

For å stille inn størrelsen på bakgrunnsbildet, "bakgrunnsstørrelse”Eiendom brukes.

Syntaks

Bakgrunnsstørrelse har følgende syntaks:

Bakgrunnsstørrelse: Lengde | Dekk

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

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

Eksempel

Vi vil sette størrelsen på bakgrunnen som “100%”Høyde og“80%”Bredde:

div
..
Bakgrunnsstørrelse: 100% 80%;

Du kan se at bildet er endret størrelse basert på de spesifiserte dimensjonene:

CSS bakgrunnsoppgavningseiendom

“Bakgrunn-opprinnelse”Eiendom brukes til å justere plasseringsområdet til bakgrunnsbildet. Bildet er justert i øvre venstre hjørne som standard.

Syntaks

Syntaksen til egenskapen til bakgrunnsopptak er:

Bakgrunn-opprinnelse: Padding-Box | Border-Box | Content-Box

Verdiene til egenskapen til bakgrunnsoppgavelse er beskrevet nedenfor:

• Padding-Box: Det er standardverdien for egenskapen til bakgrunnsopptaket som brukes til å justere plasseringen av bakgrunnsbildet i henhold til polstringskanten.
• grenseboks: Det brukes til å sette bildet i henhold til grenseboksen til bildet.
• Innholdsboks: Det brukes til å stille bakgrunnsbildet i samsvar med innholdet i bildet.

Merk: Eiendommen til bakgrunnsopptaket fungerer ikke hvis verdien av bakgrunnsinnstillingen er satt som "fikset”.

Eksempel

Først må du lage en kant rundt beholderen. Her vil vi fortsette det forrige eksemplet og sette polstringsverdien som “10px”. Etter det, juster grensebredden som “15px”, Stil som“ridge”, Og farge som“RGB (1, 68, 68)”. Til slutt vil vi tilordne verdien av eiendom-opprinnelse som "Innholdsboks”:

div
..
polstring: 10px;
Grense: 15px Ridge RGB (1, 68, 68);
Bakgrunn-opprinnelse: Content-Box;

Resultatet av kode overgitt er gitt nedenfor. Du kan se at bildens posisjon er satt i henhold til innholdet i Div:

CSS Bakgrunnsklippegenskap

“Bakgrunnsklipp”Eiendom fungerer på elementets bakgrunnsfarge. Den lar deg kontrollere hvor langt en bakgrunnsfarge strekker seg utover et element, for eksempel elementets polstring, grensen og innholdet.

Syntaks

Syntaksen til bakgrunnsklippegenskapen er:

Bakgrunn-opprinnelse: Border-Box | Padding-Box | Innholdsboks

Verdiene til egenskapen til bakgrunnsoppgavelse er beskrevet nedenfor:

• grenseboks: Det er standardverdien for egenskapen til bakgrunnsoppgavelse som brukes til å sette bakgrunnsfargen bak grensen.
• Padding-Box: Den brukes til å justere fargen i polstringsboksen til elementet.
• Innholdsboks: Den brukes til å angi bakgrunnsfarge i henhold til innholdet i elementet.

Eksempel

Vi vil fortsette det forrige eksemplet og endre verdien av grensestilen til “prikket”For å forstå bakgrunnsklippegenskapen. Etter det vil vi sette verdien av bakgrunnsklippegenskapen som “Padding-Box”:

div
..
Bakgrunnsklip: Padding-Box;

Utgangen betyr at den hvite bakgrunnsfargen vises når grensekanten var slutt:

CSS bakgrunnsinnstillinger

“Bakgrunnsinnveksling”Eiendom brukes til å justere oppførselen eller bildet mens du blar på siden. Dens oppførsel kan settes med å bla med andre elementer eller fikses.

Syntaks

Syntaksen til bakgrunnsinnstillingsegenskapen er:

Bakgrunnsinnrikt: Verdi

Du kan angi verdien av bakgrunnsinnstillinger som "fikset”For å fikse bakgrunnsbildet eller“bla”For å la bildet bla med siden.

Merk: Som standard settes verdien av bakgrunnsinnstillingsegenskapen som "bla”.

Det kan sees at det ekstra bakgrunnsbildet ikke er statisk når vi har rullet. La oss nå løse dette problemet.

For å gjøre det, setter vi verdien av bakgrunnsinnstillingen som "fikset”:

div
..
Bakgrunnsinnrikt: Fast;

Her er resultatet som viser at bildet er løst:

Nå, ta turen mot sammenligningen mellom bakgrunns- og bakgrunnsfargede egenskaper.

CSS bakgrunn vs bakgrunnsfarge

Den gitte tabellen vil skille bakgrunns- og bakgrunnsfargede egenskaper på basen av funksjonene deres:

Egenskaper	CSS -bakgrunn	CSS bakgrunnsfarge
Type	Det er en super eiendom.	Det er en underforsyning av bakgrunnsegenskaper.
Funksjonalitet	Det setter alle bakgrunnsegenskaper.	Den setter bare bakgrunnsfargen.
Område	Det støtter alle bakgrunnsegenskaper	Den støtter bare bakgrunnsfargede eiendommer
Nivå	Når du trenger å legge til flere bakgrunnsverdier, er det enkelt å bruke. Du kan angi verdiene for alle bakgrunnsegenskaper på en gang.	Det kan brukes når du bare trenger å legge til en enkelt bakgrunnsfarge.
Syntaks	Bakgrunn: Verdier (Verdiene er BG-farger, BG-Image og andre egenskaper)	Bakgrunnsfarge: Farge

Det har blitt forklart hvordan bakgrunnsfargede egenskaper skiller seg fra bakgrunnsegenskaper.

Konklusjon

CSS “bakgrunn”Eiendom er en kortvarig eiendom som brukes til å angi flere bakgrunnsverdier samtidig, for eksempel farge, bilde, posisjon, størrelse, opprinnelse og mer. På den andre siden, "bakgrunnsfarge”Brukes bare til å legge til farge i bakgrunnen. I denne guiden har vi diskutert forskjellen mellom CSS bakgrunnsegenskaper og CSS bakgrunnsfarge eiendom.