Som navnet i seg selv sier bakgrunnsfarge Eiendom bestemmer bakgrunnsfarge av noe element. Det kan brukes til å endre bakgrunnsfarge av et enkelt element, flere elementer, hele siden eller hele dokumentet.

I CSS kan forskjellige verdier tilordnes bakgrunnsfarge Eiendom som oppført bellow:

• Et fargenavn i.e. rød, gul, grønn osv.,
• De heksadesimale fargeverdiene i.e. #FF0000, 00ff00, etc.
• RGB -verdien som RGB (255, 0, 0), etc.
• HSL -verdiene som (55, 45, 55) osv.

Denne oppskrivningen vil presentere en generell oversikt over bakgrunnen for bakgrunnsfarge. Den vil diskutere hvordan du skal tilordne forskjellige verdier til bakgrunnsfargede egenskaper.

Hvordan du angir bakgrunnsfarge ved hjelp av fargenavn

I CSS kan vi stille bakgrunnsfargen ved hjelp av fargenavn som rød, grønn, blå osv.

Eksempel 1: Det undergitte eksemplet vil angi bakgrunnsfargen for hele siden ved å bruke "fargelavnsverdi":

Velkommen til Linuxhint.com

Eksempel på ledd

Ovennevnte utdrag spesifiserer bakgrunnsfargen ved hjelp av intern CSS. Den vil vise følgende utgang:

Hvordan sette bakgrunnsfarge ved hjelp av heksadesimal fargekode

I CSS kan bakgrunnsfargen tildeles ved hjelp av heksadesimale fargeverdier. Den heksadesimale fargeverdien består av en “#” symbol etterfulgt av tre eller seks sifre -kode.

Eksempel 2: Det undergitte utdraget bruker den heksadesimale fargekoden for å style bakgrunnsfargen for avsnitts tagger ved å bruke intern stil og bakgrunnsfarge av

Bruker inline CSS:

Bakgrunnsfarge ved hjelp av hex-fargekode

Velkommen til Linuxhint.com

Velkommen til Linuxhint.com

Som et resultat produserer den følgende utgang:

Hvordan angi bakgrunnsfarge ved hjelp av RGB-fargekode

RGB-fargekoder kan brukes til å angi bakgrunnsfargen til et element. RGB -fargekoden bestemmer fargen ved å bruke numeriske verdier fra 0 til 255. RGB -fargen bruker tre hovedfarger i.e. (rød, grønn og blå) for å generere forskjellige fargekombinasjoner.

Eksempel 3: Følgende eksempel vil opprette en ekstern CSS -fil for å angi bakgrunnsfargen til forskjellige elementer. Den bruker RGB-fargekodene for å bruke bakgrunnsfargen.

CSS -fil:

kropp
bakgrunnsfarge: RGB (212, 212, 212);

H1
bakgrunnsfarge: RGB (0, 144, 158);

P
bakgrunnsfarge: RGB (137, 210, 236);

HTML -fil:

Bakgrunnsfarge ved hjelp av RGB-fargekode

Velkommen til Linuxhint.com

Velkommen til Linuxhint.com

Velkommen til Linuxhint.com

Ovennevnte kode vil generere følgende utfall:

Hvordan angi bakgrunnsfarge ved hjelp av RGBA-fargekode

En ekstra parameter alfa (a) kan legges til RGB -fargekoden som bestemmer opaciteten til en farge. Verdien av alfa -parameteren ligger mellom 0.0 til 1.0.

Eksempel 4: Den gitte koden nedenfor utvidet det forrige eksemplet litt og la til verdien for alfa -parameteren også:

CSS -fil:

kropp
Bakgrunnsfarge: RGBA (212, 212, 212, 0.1);

H1
Bakgrunnsfarge: RGBA (0, 144, 158, 0.1);

P
Bakgrunnsfarge: RGBA (137, 210, 236, 0.1);

HTML -fil:

Bakgrunnsfarge ved hjelp av RGB-fargekode

Velkommen til Linuxhint.com

Velkommen til Linuxhint.com

Velkommen til Linuxhint.com

Den eneste endringen i forrige (RGB) og dette (RGBA) -eksemplet er alfa -parameter. Sammenlign begge utgangene du vil merke en klar forskjell:

Slik fungerte alfa -parameteren.

Hvordan angi bakgrunnsfarge ved hjelp av HSL-fargekode

CSS støtter en annen fargekonvensjon som heter HSL. HSL setter en farge med hensyn til fargetone, metning og letthet.

Eksempel 5: Tenk på følgende kode som spesifiserer hvordan HSL -konvensjonen fungerer:

Bakgrunnsfarge ved hjelp av HSL-fargekode

Velkommen til Linuxhint.com

Velkommen til Linuxhint.com

Ovennevnte kode implementerte bakgrunnsfargen på

og

element ved bruk av HSL -fargekonvensjon. Den vil vise følgende utgang:

Hvordan angi bakgrunnsfarge ved hjelp av HSLA-fargekode

Alfa -parameteren kan brukes med HSL -fargekonvensjonen for å spesifisere opaciteten til en farge.

Eksempel 6: La oss utvide den ovennevnte koden litt mer og legge til alfa-parameteren i HSL:

Bakgrunnsfarge ved hjelp av HSLA-fargekode

Velkommen til Linuxhint.com

Velkommen til Linuxhint.com

Utgangen vil bevise at alfa-parameteren la opaciteten til bakgrunnsfargen som vist nedenfor:

Konklusjon

CSS benyttet en bakgrunnsegenskap for å implementere bakgrunnsfargen på et element, side osv. Bakgrunnsfargen kan tilordnes ved å bruke flere måter som ved å spesifisere fargenavnet, heksadesimal verdi, RGB-verdi, etc.

Denne oppskrivningen vurderte flerfargekonvensjoner for bakgrunnsfargede eiendommer. Den gir en detaljert guide om hvordan du bruker bakgrunnsfargen ved å bruke "fargetavn", "heksadesimale verdier", "RGB, RGBA fargekoder" og "HSL, HSLA fargekoder".