CSS fonas prieš fono spalvą

CSS suteikia skirtingas HTML elementų stiliaus savybes. Šios savybės naudojamos įvairiems tikslams, pvz., pridėti fono vaizdą ir spalvą bei nustatyti HTML elementų plotį ir aukštį. Šios savybės apima paraštę, spalvą, plotį, aukštį, foną, fono spalvą ir daug daugiau. Tiksliau, fono ir fono spalvos ypatybė naudojama HTML elementų fonui nustatyti.

Šiame vadove mes išsamiai sužinosime, kuo skiriasi fono ir fono spalvos savybės.

Pradėkime!

CSS fono ypatybė

Norėdami pakoreguoti bet kurio HTML elemento foną, CSS ' fone “ turtas yra naudojamas. Tai yra dar aštuonių savybių sutrumpinta savybė, o tai reiškia, kad visas jas galite naudoti vienoje eilutėje. Šios kitos savybės yra:

fono spalva
fono vaizdas
fono padėtis
fono dydžio
fono kartojimas
fono kilmė
fono klipas
fonas-priedas

Sintaksė

Čia yra fono nuosavybės sintaksė:

fonas: spalvoto vaizdo padėtis/dydis kartojasi klipo priedas

Pereikime prie visų aukščiau paminėtų savybių paaiškinimo po vieną.

CSS fono spalvos ypatybė

Naudojant ' fono spalva “, galite nustatyti fono spalvą. Spalva bus rodoma už HTML elementų.

Sintaksė

Fono spalvos savybės sintaksė yra tokia:

fono spalva : spalva

Vietoje ' spalva “, galite nustatyti fono spalvą, kurią norite matyti už elementų.

Pavyzdys

Pirmiausia HTML faile sukursime konteinerį naudodami

žymą, tada pridėsime antraštę ir pastraipą.

HTML

< div >

< h1 > LinuxHint < / h1 >

< p > Sveiki atvykę į mūsų svetainę < / p >

< / div >

CSS koreguosime div aukštį kaip „ 100 % “, kad jis būtų rodomas visame puslapyje ir teksto šrifto dydis kaip „ xx didelis “. Po to nustatykite fono spalvą kaip ' aqua “.

CSS

div {

aukščio : 100 % ;

šrifto dydis : xx didelis ;

fono spalva : aqua ;

}

Toliau pateiktame paveikslėlyje matote, kad pritaikyta fono spalva:

CSS fono vaizdo ypatybė

„ fono vaizdas ypatybė naudojama vienam ar daugiau vaizdų nustatyti kaip HTML elementų foną. Galite naudoti šią savybę norėdami pridėti skirtingus fono vaizdus skirtingiems elementams.

Sintaksė

Fono vaizdo ypatybės sintaksė yra tokia:

fono vaizdas: url()

Čia pateikite vaizdo, kurį norite nustatyti kaip foną, kelią kaip argumentą „ url() “.

Pavyzdys

Tęsdami ankstesnį pavyzdį, pridėkite fono paveikslėlį į ' div ' klasė. Mes pridėsime vaizdo URL kaip ' url (img.jpg) “:

div {

...

fono vaizdas : url ( img.jpg ) ;

}

Toliau pateikta išvestis rodo, kad fono vaizdas buvo sėkmingai pridėtas:

Atminkite, kad vaizdas kartojasi. Norėdami išspręsti šią problemą, peržiūrėkite kitą nuosavybę.

CSS fono kartojimo ypatybė

Kai pridedate vaizdą kaip foną tinklalapyje, jis kartojamas pagal numatytuosius nustatymus. Kad išvengtumėte šio pasikartojimo ir nustatykite modelį pagal savo pasirinkimą, „ fono kartojimas “ turtas yra naudojamas.

Sintaksė

Fono kartojimo ypatybės sintaksė yra tokia:

fono kartojimas : kartoti | kartoti-x | kartoti-y | nekartoti

Nurodytų fono pasikartojimo ypatybių verčių aprašymas pateikiamas toliau:

kartoti: Jis naudojamas vaizdo kartojimui abiem kryptimis – vertikaliai ir horizontaliai.
pakartokite-x: Jis naudojamas vaizdo pasikartojimui nustatyti tik horizontaliai.
pakartokite-y: Jis nurodo vertikalų vaizdo pasikartojimą.
nesikartoja: Jis naudojamas siekiant išvengti vaizdo pasikartojimo.

Pavyzdys

Čia nustatysime fono kartojimo ypatybės vertę kaip „ nekartoti “:

div {

...

fono kartojimas : nekartoti ;

}

Aukščiau pateikto kodo rezultatas pateikiamas žemiau. Matote, kad vaizdas nebepasikartoja:

CSS fono padėties ypatybė

Norėdami nustatyti fono paveikslėlio padėtį, „ fono padėtis “ naudojamas turtas. Tai leidžia reguliuoti vaizdą įvairiose pozicijose, pvz., kairėje viršuje, kairėje centre, kairėje apačioje, dešinėje viršuje, dešinėje centre ir daug daugiau.

Sintaksė

Fono padėties nuosavybės sintaksė yra tokia:

fono padėtis : vertė

Vietoje ' vertė “, galite nurodyti vaizdo padėtį.

Pavyzdys

Čia mes nustatysime fono padėtį kaip ' centras “:

div {

...

fono padėtis : centras ;

}

Žemiau esančioje išvestyje vaizdas rodomas puslapio centre:

CSS fono dydžio nuosavybė

Norėdami nustatyti fono paveikslėlio dydį, „ fono dydžio “ naudojamas turtas.

Sintaksė

Fono dydis turi tokią sintaksę:

fono dydžio : ilgio|dangtelis

Toliau pateikiamas fono dydžio nuosavybės verčių aprašymas:

ilgis: Jis naudojamas fono vaizdo pločiui ir aukščiui nustatyti.
viršelis: Jis naudojamas norint sureguliuoti fono vaizdą visame fone.

Pavyzdys

Fono dydį nustatysime kaip „ 100 % 'aukštis ir ' 80 % “ plotis:

div {

...

fono dydžio : 100 % 80 % ;

}

Matote, kad vaizdo dydis buvo pakeistas pagal nurodytus matmenis:

CSS fono kilmės nuosavybė

„ fono kilmė “ ypatybė naudojama fono vaizdo padėties sričiai koreguoti. Pagal numatytuosius nustatymus vaizdas koreguojamas viršutiniame kairiajame kampe.

Sintaksė

Fono kilmės nuosavybės sintaksė yra tokia:

fono kilmė : kamšalu-dėžė| kraštinė-dėžė | turinio dėžutė

Foninės kilmės ypatybės reikšmės aprašytos toliau:

kamšalo dėžutė: Tai yra numatytoji fono kilmės ypatybės reikšmė, naudojama fono vaizdo padėčiai reguliuoti pagal užpildymo kraštą.
kraštinė: Jis naudojamas norint nustatyti vaizdą pagal vaizdo kraštinę.
turinio dėžutė: Jis naudojamas nustatyti fono vaizdą pagal vaizdo turinį.

Pastaba: Fono kilmės ypatybė neveikia, jei fono priedo ypatybės vertė nustatyta kaip „ fiksuotas “.

Pavyzdys

Pirmiausia aplink konteinerį sukurkite kraštą. Čia mes tęsime ankstesnį pavyzdį ir nustatysime užpildymo reikšmę kaip „ 10 piks “. Po to sureguliuokite kraštinės plotį kaip „ 15 piks “, stilius kaip „ ketera “ ir spalva kaip „ rgb(1, 68, 68) “. Galiausiai foninės kilmės nuosavybės vertę priskirsime kaip „ turinio dėžutė “:

div {

...

kamšalas : 10 piks ;

siena : 15 piks ketera rgb ( 1 , 68 , 68 ) ;

fono kilmė : turinio dėžutė ;

}

Aukščiau pateikto kodo rezultatas pateikiamas žemiau. Matote, kad vaizdo padėtis nustatoma pagal div turinį:

CSS fono klipo ypatybė

„ fono klipas “ ypatybė veikia naudojant elemento fono spalvą. Tai leidžia valdyti, kiek fono spalva tęsiasi už elemento, pvz., elemento užpildymo, kraštinės ir turinio.

Sintaksė

Fono klipo ypatybės sintaksė yra tokia:

fono kilmė : kraštinė-dėžė | kamšalo dėžutė | turinio dėžutė

Foninės kilmės ypatybės reikšmės aprašytos toliau:

kraštinė: Tai yra numatytoji fono kilmės ypatybės reikšmė, naudojama nustatant fono spalvą už kraštinės.
kamšalo dėžutė: Jis naudojamas spalvai reguliuoti elemento užpildymo laukelyje.
turinio dėžutė: Jis naudojamas nustatyti fono spalvą pagal elemento turinį.

Pavyzdys

Tęsime ankstesnį pavyzdį ir pakeisime kraštinės stiliaus reikšmę į ' taškuotas “, kad suprastumėte fono klipo ypatybę. Po to fono klipo nuosavybės vertę nustatysime kaip „ kamšalu-dėžutė “:

div {

...

fono klipas : kamšalu-dėžutė ;

}

Išvestis reiškia, kad balta fono spalva rodoma, kai baigiasi kraštinės kraštas:

CSS fono priedo ypatybė

„ fonas-priedas “ ypatybė naudojama elgesiui arba vaizdui koreguoti slenkant puslapiu. Jo elgesys gali būti nustatytas slenkant su kitais elementais arba fiksuotas.

Sintaksė

Fono priedo ypatybės sintaksė yra tokia:

fonas-priedas : vertė

Galite nustatyti fono priedo reikšmę kaip ' fiksuotas “, kad pataisytumėte fono vaizdą arba „ slinkti “, kad vaizdas slinktų kartu su puslapiu.

Pastaba: Pagal numatytuosius nustatymus fono priedo ypatybės reikšmė nustatyta kaip ' slinkti “.

Matome, kad pridėtas fono paveikslėlis nėra statiškas, kai mes slinkome. Dabar išspręskime šią problemą.

Norėdami tai padaryti, nustatome fono priedo ypatybės vertę kaip „ fiksuotas “:

div {

...

fonas-priedas : fiksuotas ;

}

Štai rezultatas, parodantis, kad vaizdas buvo pataisytas:

Dabar pereikite prie fono ir fono spalvos savybių palyginimo.