CSS-i taust vs taustavärv

, ning lisame seejärel pealkirja ja lõigu.

HTML

< div >

< h1 > LinuxHint < / h1 >

< lk > Tere tulemast meie veebisaidile < / lk >

< / div >

CSS-is reguleerime div kõrgust järgmiselt 100% ', et see ilmuks kogu lehel ja teksti fondisuuruses kujul ' xx-suur ”. Pärast seda määrake taustavärviks ' aqua ”.

CSS

div {

kõrgus : 100% ;

fondi suurus : xx-suur ;

taustavärv : aqua ;

}

Alloleval pildil näete, et taustavärv on rakendatud:

CSS-i taustapildi atribuut

' taustapilt ” atribuuti kasutatakse ühe või mitme pildi määramiseks HTML-i elementide taustaks. Seda atribuuti saate kasutada erinevate elementide jaoks erinevate taustapiltide lisamiseks.

Süntaks

Taustpildi atribuudi süntaks on:

taustapilt: url()

Siin andke argumendiks pildi tee, mida soovite taustaks seada. url() ”.

Näide

Eelmise näite jätkuks lisage taustapilt jaotisesse ' div ” klass. Lisame pildi URL-i kujul ' url (img.jpg) ”:

div {

...

taustapilt : url ( img.jpg ) ;

}

Allpool esitatud väljund näitab, et taustpilt on edukalt lisatud:

Pange tähele, et pilt kordub. Selle probleemi lahendamiseks vaadake järgmist kinnisvara.

CSS-i taustakorduse atribuut

Kui lisate veebilehe taustaks pildi, korratakse seda vaikimisi. Selle kordumise vältimiseks ja mustri seadistamiseks vastavalt oma valikule, taustakordus ” vara on kasutusel.

Süntaks

Taustakorduse atribuudi süntaks on:

taustakordus : korda | korda-x | korda-y | ei-korda

Taustakorduse atribuudi määratud väärtuste kirjeldus on toodud allpool:

• korda: Seda kasutatakse pildi kordamiseks mõlemas suunas, vertikaalselt ja horisontaalselt.
• korda-x: Seda kasutatakse pildi korduse määramiseks ainult horisontaalselt.
• korda-y: See määrab pildi vertikaalse korduse.
• mittekorduv: Seda kasutatakse pildi kordumise vältimiseks.

Näide

Siin määrame tausta korduse atribuudi väärtuseks ' ei-korda ”:

div {

...

taustakordus : ei-korda ;

}

Ülaltoodud koodi tulemus on toodud allpool. Näete, et pilt ei kordu enam:

CSS-i taustapositsiooni atribuut

Taustapildi asukoha määramiseks kasutage tausta-positsioon ” kinnisvara kasutatakse. See võimaldab teil reguleerida pilti erinevates positsioonides, nagu vasak ülemine, vasak keskel, vasak alumine, parem ülemine, parem keskel ja palju muud.

Süntaks

Taustapositsiooni atribuudi süntaks on:

tausta-positsioon : väärtus

' asemel väärtus ”, saate määrata pildi asukoha.

Näide

Siin määrame taustapositsiooniks ' Keskus ”:

div {

...

tausta-positsioon : Keskus ;

}

Allolevas väljundis kuvatakse pilt lehe keskel:

CSS-i taustasuuruses atribuut

Taustapildi suuruse määramiseks tuleb tausta suurus ” kinnisvara kasutatakse.

Süntaks

Tausta suurusel on järgmine süntaks:

tausta suurus : pikkus|kaas

Tausta suuruse atribuudi väärtuste kirjeldus on järgmine:

• pikkus: Seda kasutatakse taustapildi laiuse ja kõrguse fikseerimiseks.
• kate: Seda kasutatakse taustapildi reguleerimiseks kogu taustal.

Näide

Tausta suuruseks määrame ' 100% ' kõrgus ja ' 80% ” laius:

div {

...

tausta suurus : 100% 80% ;

}

Näete, et pildi suurust on määratud mõõtmete alusel muudetud:

CSS-i tausta päritolu atribuut

' tausta päritolu ” atribuuti kasutatakse taustapildi positsioneerimisala reguleerimiseks. Vaikimisi reguleeritakse pilti vasakus ülanurgas.

Süntaks

Tausta päritolu atribuudi süntaks on:

tausta päritolu : polsterduskast| ääris-kast | sisukast

Tausta päritolu atribuudi väärtusi kirjeldatakse allpool:

• polsterduskarp: See on tausta päritolu atribuudi vaikeväärtus, mida kasutatakse taustapildi asukoha reguleerimiseks vastavalt polsterduse servale.
• piirikast: Seda kasutatakse pildi seadistamiseks vastavalt pildi äärisele.
• sisukast: Seda kasutatakse taustapildi seadistamiseks vastavalt pildi sisule.

Märge: Tausta päritolu atribuut ei tööta, kui taustamanuse atribuudi väärtuseks on määratud ' fikseeritud ”.

Näide

Esiteks looge konteineri ümber ääris. Siin jätkame eelmist näidet ja määrame polsterduse väärtuseks ' 10 pikslit ”. Pärast seda reguleerige äärise laiust järgmiselt 15 pikslit ”, stiil kui „ hari ' ja värv on ' rgb(1, 68, 68) ”. Lõpuks määrame tausta päritolu atribuudi väärtuseks ' sisukast ”:

div {

...

polsterdus : 10 pikslit ;

piir : 15 pikslit hari rgb ( 1 , 68 , 68 ) ;

tausta päritolu : sisukast ;

}

Ülaltoodud koodi tulemus on toodud allpool. Näete, et pildi asukoht on määratud vastavalt div sisule:

CSS-i taustaklipi atribuut

' taustklipp ” atribuut töötab elemendi taustavärviga. See võimaldab teil juhtida, kui kaugele ulatub taustavärv elemendist kaugemale (nt elemendi polsterdus, ääris ja sisu).

Süntaks

Taustaklipi atribuudi süntaks on:

tausta päritolu : ääris-kast | polsterduskast | sisukast

Tausta päritolu atribuudi väärtusi kirjeldatakse allpool:

• piirikast: See on tausta päritolu atribuudi vaikeväärtus, mida kasutatakse taustavärvi määramiseks piiri taga.
• polsterduskarp: Seda kasutatakse värvi reguleerimiseks elemendi polsterduskastis.
• sisukast: Seda kasutatakse taustavärvi määramiseks vastavalt elemendi sisule.

Näide

Jätkame eelmist näidet ja muudame ääriste stiili väärtuseks ' täpiline ”, et mõista taustaklipi omadust. Pärast seda määrame taustaklipi atribuudi väärtuseks ' polsterduskarp ”:

div {

...

taustklipp : polsterduskarp ;

}

Väljund tähendab, et äärise serva lõppedes kuvatakse valge taustavärv:

CSS-i taustamanuse atribuut

' tausta-manuse ” atribuuti kasutatakse käitumise või pildi reguleerimiseks lehe kerimise ajal. Selle käitumist saab seadistada kerimiseks koos teiste elementidega või fikseerida.

Süntaks

Taustamanuse atribuudi süntaks on:

tausta-manuse : väärtus

Saate määrata taustamanuse väärtuseks ' fikseeritud taustapildi parandamiseks või ' kerige ”, et lubada pildil koos lehega kerida.

Märge: Vaikimisi on taustamanuse atribuudi väärtuseks määratud ' kerige ”.

On näha, et lisatud taustpilt ei ole staatiline, kui oleme kerinud. Nüüd lahendame selle probleemi.

Selleks määrame taustamanuse atribuudi väärtuseks ' fikseeritud ”:

div {

...

tausta-manuse : fikseeritud ;

}

Siin on tulemus, mis näitab, et pilt on parandatud:

Nüüd liikuge tausta ja taustavärvi omaduste võrdluse poole.

CSS-i taust vs taustavärv

Antud tabel eristab tausta ja taustavärvi omadusi nende omaduste põhjal:

Funktsioonid	CSS-i taust	CSS-i taustavärv
Tüüp	Tegemist on supervaraga.	See on taustavara alamvara.
Funktsionaalsus	See määrab kõik tausta omadused.	See määrab ainult taustavärvi.
Vahemik	See toetab kõiki tausta atribuute	See toetab ainult taustavärvi omadust
Tase	Kui teil on vaja lisada mitu tausta väärtust, on seda lihtne kasutada. Saate määrata kõigi taustaomaduste väärtused korraga.	Seda saab kasutada, kui peate lisama ainult ühe taustavärvi.
Süntaks	taust: väärtused (Väärtused on bg-color, bg-image ja muud omadused)	taustavärv: värv

On selgitatud, kuidas taustavärvi omadused erinevad tausta omadustest.

Järeldus

CSS ' taustal ” atribuut on stenogrammi atribuut, mida kasutatakse korraga mitme taustaväärtuse (nt värv, pilt, asukoht, suurus, päritolu ja muu) määramiseks. Teiselt poolt, ' taustavärv ” kasutatakse ainult taustale värvi lisamiseks. Selles juhendis oleme arutanud erinevust CSS-i taustaatribuudi ja CSS-i taustavärvi atribuudi vahel.