CSS fons pret fona krāsu

, un pēc tam pievienosim virsrakstu un rindkopu.

HTML

< div >

< h1 > LinuxHint < / h1 >

< lpp > Laipni lūdzam mūsu mājas lapā < / lpp >

< / div >

CSS mēs noregulēsim div augstumu kā ' 100% ”, lai tas būtu redzams visā lapā un teksta fonta lielums kā “ xx liels ”. Pēc tam iestatiet fona krāsu kā ' aqua ”.

CSS

div {

augstums : 100% ;

fonta izmērs : xx liels ;

fona krāsa : aqua ;

}

Tālāk sniegtajā attēlā var redzēt, ka ir piemērota fona krāsa:

CSS fona attēla īpašums

' fona attēls Īpašums tiek izmantots, lai iestatītu vienu vai vairākus attēlus kā HTML elementu fonu. Varat izmantot šo īpašumu, lai dažādiem elementiem pievienotu dažādus fona attēlus.

Sintakse

Fona attēla rekvizīta sintakse ir:

fona attēls: url()

Šeit norādiet attēla ceļu, kuru vēlaties iestatīt kā fonu kā argumentu ' url() ”.

Piemērs

Turpinot iepriekšējo piemēru, pievienojiet fona attēlu ' div ” klase. Mēs pievienosim attēla URL kā ' url (img.jpg) ”:

div {

...

fona attēls : url ( img.jpg ) ;

}

Tālāk sniegtā izvade norāda, ka fona attēls ir veiksmīgi pievienots:

Ņemiet vērā, ka attēls tiek atkārtots. Lai atrisinātu šo problēmu, apskatiet nākamo īpašumu.

CSS fona atkārtošanas rekvizīts

Kad tīmekļa lapai pievienojat attēlu kā fonu, tas pēc noklusējuma tiek atkārtots. Lai izvairītos no šīs atkārtošanās un iestatītu modeli pēc savas izvēles, “ fona atkārtojums ” īpašums tiek izmantots.

Sintakse

Fona atkārtojuma rekvizīta sintakse ir šāda:

fona atkārtojums : atkārtojiet | atkārtojiet-x | atkārtojiet-y | nē-atkārtoties

Tālāk ir sniegts fona atkārtojuma rekvizīta norādīto vērtību apraksts:

• atkārtojiet: To izmanto, lai atkārtotu attēlu abos virzienos, vertikāli un horizontāli.
• atkārtojiet-x: To izmanto, lai iestatītu attēla atkārtošanos tikai horizontāli.
• atkārtojiet-y: Tas norāda attēla vertikālo atkārtošanos.
• neatkārtojas: To izmanto, lai izvairītos no attēla atkārtošanās.

Piemērs

Šeit mēs iestatīsim fona atkārtošanas rekvizīta vērtību kā “ nē-atkārtoties ”:

div {

...

fona atkārtojums : nē-atkārtoties ;

}

Iepriekš sniegtā koda rezultāts ir norādīts zemāk. Var redzēt, ka attēls vairs neatkārtojas:

CSS fona pozīcijas īpašums

Lai iestatītu fona attēla pozīciju, fona pozīcija ” īpašums tiek izmantots. Tas ļauj pielāgot attēlu dažādās pozīcijās, piemēram, pa kreisi augšā, pa kreisi centrā, pa kreisi apakšā, pa labi augšā, pa labi centrā un daudz ko citu.

Sintakse

Fona pozīcijas rekvizīta sintakse ir:

fona pozīcija : vērtību

Vietā ' vērtību ”, varat norādīt attēla pozīciju.

Piemērs

Šeit mēs iestatīsim fona pozīciju kā ' centrs ”:

div {

...

fona pozīcija : centrs ;

}

Zemāk esošajā izvadā attēls parādās lapas centrā:

CSS fona izmēra īpašums

Lai iestatītu fona attēla izmēru, ' fona izmērs ” īpašums tiek izmantots.

Sintakse

Fona izmēram ir šāda sintakse:

fona izmērs : garums|apvalks

Tālāk ir sniegts fona izmēra rekvizīta vērtību apraksts:

• garums: To izmanto, lai fiksētu fona attēla platumu un augstumu.
• piesegt: To izmanto, lai pielāgotu fona attēlu visā fonā.

Piemērs

Mēs iestatīsim fona izmēru kā ' 100% 'augstums un ' 80% ” platums:

div {

...

fona izmērs : 100% 80% ;

}

Varat redzēt, ka attēla izmērs ir mainīts, pamatojoties uz norādītajiem izmēriem:

CSS fona izcelsmes īpašums

' fona izcelsme ” rekvizīts tiek izmantots, lai pielāgotu fona attēla pozicionēšanas apgabalu. Pēc noklusējuma attēls tiek pielāgots augšējā kreisajā stūrī.

Sintakse

Fona izcelsmes rekvizīta sintakse ir:

fona izcelsme : polsterējums-kaste| apmale-box | satura lodziņš

Fona izcelsmes rekvizīta vērtības ir aprakstītas tālāk:

• polsterējuma kaste: Tā ir fona izcelsmes rekvizīta noklusējuma vērtība, ko izmanto, lai pielāgotu fona attēla pozīciju atbilstoši polsterējuma malai.
• apmales lodziņš: To izmanto, lai iestatītu attēlu atbilstoši attēla apmalei.
• satura lodziņš: To izmanto, lai iestatītu fona attēlu atbilstoši attēla saturam.

Piezīme: Fona izcelsmes rekvizīts nedarbojas, ja fona pielikuma rekvizīta vērtība ir iestatīta kā “ fiksēts ”.

Piemērs

Vispirms izveidojiet apmali ap konteineru. Šeit mēs turpināsim iepriekšējo piemēru un iestatīsim polsterējuma vērtību kā ' 10 pikseļi ”. Pēc tam noregulējiet apmales platumu kā ' 15 pikseļi ”, stils kā “ grēda ”, un krāsa kā “ rgb(1, 68, 68) ”. Beigās mēs piešķirsim fona izcelsmes īpašuma vērtību kā “ satura lodziņš ”:

div {

...

polsterējums : 10 pikseļi ;

robeža : 15 pikseļi grēda rgb ( 1 , 68 , 68 ) ;

fona izcelsme : satura lodziņš ;

}

Iepriekš sniegtā koda rezultāts ir norādīts zemāk. Varat redzēt, ka attēla pozīcija ir iestatīta atbilstoši div saturam:

CSS fona klipa īpašums

' fona klips ” īpašums darbojas uz elementa fona krāsas. Tas ļauj kontrolēt, cik tālu fona krāsa sniedzas ārpus elementa, piemēram, elementa polsterējumu, apmali un saturu.

Sintakse

Fona klipa rekvizīta sintakse ir šāda:

fona izcelsme : apmale-box | polsterējuma kaste | satura lodziņš

Fona izcelsmes rekvizīta vērtības ir aprakstītas tālāk:

• apmales lodziņš: Tā ir fona izcelsmes rekvizīta noklusējuma vērtība, ko izmanto, lai iestatītu fona krāsu aiz robežas.
• polsterējuma kaste: To izmanto, lai pielāgotu krāsu elementa polsterējuma lodziņā.
• satura lodziņš: To izmanto, lai iestatītu fona krāsu atbilstoši elementa saturam.

Piemērs

Mēs turpināsim iepriekšējo piemēru un mainīsim apmales stila vērtību uz ' punktēts ”, lai izprastu fona klipa īpašību. Pēc tam mēs iestatīsim fona klipa rekvizīta vērtību kā “ polsterējums-kaste ”:

div {

...

fona klips : polsterējums-kaste ;

}

Izvade nozīmē, ka baltā fona krāsa tiek parādīta, kad beidzas apmales mala:

CSS fona pielikuma rekvizīts

' fona pielikums ” rekvizīts tiek izmantots, lai pielāgotu darbību vai attēlu, ritinot lapu. Tās darbību var iestatīt ritināšanu ar citiem elementiem vai fiksēt.

Sintakse

Fona pielikuma rekvizīta sintakse ir:

fona pielikums : vērtību

Varat iestatīt fona pielikuma vērtību kā “ fiksēts ”, lai labotu fona attēlu vai ritiniet ”, lai ļautu attēlam ritināt kopā ar lapu.

Piezīme: Pēc noklusējuma fona pielikuma rekvizīta vērtība ir iestatīta kā “ ritiniet ”.

Redzams, ka pievienotais fona attēls nav statisks, kad esam ritinājuši. Tagad atrisināsim šo problēmu.

Lai to izdarītu, mēs iestatām fona pielikuma rekvizīta vērtību kā “ fiksēts ”:

div {

...

fona pielikums : fiksēts ;

}

Šis ir rezultāts, kas parāda, ka attēls ir labots:

Tagad pārejiet pie fona un fona krāsas īpašību salīdzinājuma.

CSS fons pret fona krāsu

Dotā tabula atšķirs fona un fona krāsas īpašības, pamatojoties uz to īpašībām:

Iespējas	CSS fons	CSS fona krāsa
Tips	Tas ir superīpašums.	Tas ir fona īpašuma apakšīpašums.
Funkcionalitāte	Tas nosaka visus fona rekvizītus.	Tas nosaka tikai fona krāsu.
Diapazons	Tā atbalsta visas fona īpašības	Tas atbalsta tikai fona krāsas īpašumu
Līmenis	Ja jums jāpievieno vairākas fona vērtības, to ir viegli lietot. Varat iestatīt visu fona rekvizītu vērtības vienlaikus.	To var izmantot, ja jums ir jāpievieno tikai viena fona krāsa.
Sintakse	fons: vērtības (Vērtības ir bg-color, bg-image un citas īpašības)	fona krāsa: krāsa

Ir izskaidrots, kā fona krāsas īpašības atšķiras no fona īpašībām.

Secinājums

CSS ' fons ” rekvizīts ir saīsināts rekvizīts, ko izmanto, lai vienlaikus iestatītu vairākas fona vērtības, piemēram, krāsu, attēlu, pozīciju, izmēru, izcelsmi un citus. No otras puses, ' fona krāsa ” tiek izmantots tikai, lai fonam pievienotu krāsu. Šajā rokasgrāmatā mēs esam apsprieduši atšķirību starp CSS fona īpašumu un CSS fona krāsas rekvizītu.