Hreiður staður: hvernig á að gera bakgrunnsmynd HTML

Margir nýliði vefur hönnuður, aðeins til að kafa inn í kjarna stofnun stöðum, oft furða hvernig á að gera HTML bakgrunnsmynd. Og ef einhver þeirra getur tekist á við þetta vandamál, það er enn vandamál á þeim tíma sem teygja yfir alla breidd myndarinnar á skjánum. Á sama tíma sem ég vildi eins og til að sjá síðuna eru birt samur á öllum vöfrum, svo það ætti að uppfylla kröfur kross-vafranum. Hægt er að setja bakgrunn á tvo vegu: með því að nota HTML tög og CSS stíll. Hvor fyrir sig velur besti kosturinn. Auðvitað, CSS stíll er miklu þægilegra, því númerið hennar er geymt í sérstakri skrá og tekur ekki upp auka hátölurum í tags helstu síðuna, en fyrst skulum við líta einfalda aðferð til að setja myndina á bakgrunni vefnum.

Basic HTML tög til að búa til bakgrunn

Svo förum við að spurningunni um hvernig á að gera bakgrunnsmynd í html á skjánum. Til þess að líta fallega á síðuna, verður þú að skilja eitt frekar mikilvægur smáatriði: það er nóg bara að gera stigull bakgrunn eða mála það solid lit, en ef þú þarft að setja bakgrunnsmynd, það mun ekki teygja í fullri lengd af the skjár. Myndin var upphaflega nauðsynlegt að taka upp eða gera eigin hönnun með þessa viðbót, þar sem þú verður að sýna síðu á vefsvæðinu. Aðeins þegar bakgrunnsmynd er tilbúin, draga það inn í möppur sem heita «Images». Í það, munum við geyma alla notaða myndir, hreyfimyndir og aðrar grafískur skrár. Þessi mappa ætti að vera staðsett í the rót skrá með öllum HTML skrár. Nú er hægt að fara á og á kóða. Það eru nokkrir möguleikar til að skrifa kóðann, sem bakgrunnur mun breyta mynd.

1. Skrifaðu tag eiginleiki.
2. Með CSS stíl í HTML kóða.
3. Skrifaðu CSS stíll í sérstakri skrá.

Eins og í HTML til að gera bakgrunnsmynd, þú ákveður, en ég vildi eins og til að segja nokkur orð um hvernig það væri að vera sem mest ákjósanlegur. The fyrstur aðferð er með því að skrifa með merki eiginleiki hefur lengi verið úrelt. Seinni valkosturinn er notaður mjög sjaldan, því það kemur í ljós að mikið af sama kóða. Þriðja valkostur er algengasta og áhrifarík. Hér eru dæmi um HTML tags:

1. Fyrsti Ritunaraðferðin gegnum tag eigind (líkama) í index.htm skrá. Það er geymt í þessu formi: (líkamsþyngd bakgrunni = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ body). Það er, ef við höfum mynd með titlinum «Picture» og framlengingu JPG, og mappa sem við heitir «Myndir», þá HTML-kóða færslu mun líta svona út: (líkami bakgrunnur = "Images / mynd.jpg") ... (/ body) .
2. The second aðferð felur upptöku CSS stíl, en það er ritað í sömu skrá með nafninu index.htm. (Body style = "bakgrunnur: url ( '../ Images / mynd.jpg')").
3. Þriðja aðferðin við upptöku er gert í tveimur skrám. Skjalið með nafn index.htm tag (höfuð) er skrifað svona lína: (head) (tengill rel = "stílblað" type = "text / CSS" href = "http: // staðnum / grein / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ höfuð). A skrá sem heitir style.css stíl þegar skrifað: body {background: url (Images / mynd.jpg ')}.

Eins og í HTML til að gera bakgrunnsmynd, við skiljum. Nú þú þarft að reikna út hvernig á að teygja myndina yfir breidd allan skjáinn.

Leiðir til að teygja bakgrunnsmynd breidd gluggans

Við tákna skjár okkar í formi prósenta. Það kemur í ljós að allt breidd og lengd af the skjár vilja vera 100% × 100%. Við þurfum að teygja myndina til þessa breidd. Bæta við mynd skrá upptöku style.css lína sem mun teygja myndina yfir alla breidd og lengd af the skjár. Eins og það er skrifað í CSS stíl? Það er svo einfalt!

líkami

{

bakgrunnur: url (Images / mynd.jpg ')

bakgrunnur-size: 100%; / * Þessi færsla er hentugur fyrir flestum nútíma vöfrum * /

}

Þannig að við mynstrağur út hvernig á að gera mynd bakgrunn í html á skjánum. Það er líka aðferð til að taka á index.htm skrá. Þó þessi aðferð og gamaldags, en fyrir byrjendur er nauðsynlegt að vita og skilja. The tag (höfuð) (stíl) div {background-size: kápa; } (/ Style) (/ höfuð), þetta met þýðir að við úthluta sérstaka einingu fyrir bakgrunn, sem verður staðsettur yfir alla breidd í glugganum. Við höfum talið tvær leiðir, hvernig á að gera a bakgrunnur mynd HTML síðuna, þannig að myndin er strekkt á öllu breidd á skjánum í einhverju nútíma vöfrum.

Hvernig á að gera fasta bakgrunn

Ef þú ákveður að nota mynd sem bakgrunn í framtíðinni vefur auðlind, þá þarftu bara að vita hvernig á að gera það fast, þannig að það er ekki strekkt á lengd og ekki spilla fagurfræðilegu útliti. Einfaldlega með því að nota HTML kóða til að skrá lítið viðbót. Þú þarft að skrá style.css að bæta við setningu á eftir bakgrunni: url (images / mynd.jpg ') föst; eða í staðinn bætt við eftir semíkommu sérstakt lína - staða: fast. Þannig veggfóður mun vera fastur. Á rolla efni á vefnum, þú munt sjá að texta línur eru að flytja, en bakgrunnurinn enn á sínum stað. Svo þú lært hvernig á að gera html bakgrunnsmynd á nokkra vegu.

Vinna með töflum í HTML

Margir óreyndur vefur verktaki, frammi borðum og blokkir, oft skilur ekki hvernig á að gera HTML bakgrunnsmynd borð. Eins og öll lið HTML og CSS stíl, vefur forritunarmál er frekar einfalt. Og lausnin á þessu vandamáli er að skrifa eitt par af línum af kóða. Þú ættir nú þegar vita að skrifa töflu raða og dálka, í sömu röð, eins og fram merkjunum (st) og (TD). Til að gera bakgrunn borðið í formi myndar, það er nauðsynlegt að bæta við merkinu (borð), (st) eða (TD) einfaldri setningu með vísan til tilvísun mynd: bakgrunnur = URL myndum. Fyrir skýrleika, gefum nokkra dæmum.

Tafla með mynd í stað bakgrunni: HTML dæmi

Teiknaðu 2x3 borð og gera það bakgrunnsmynd geymd í möppunni "myndir": (töflubakgrunns = "images / mynd.jpg") (st) (td) 1 (/ td) (TD) 2 (/ td) (td) 3) (/ td) (/ tr) (st) (TD) 4 (/ td) (TD) 5 (/ td) (TD) 6 (/ td) (/ tr) (/ töflu). Svo borðið okkar verður dregið í bakgrunni myndarinnar.

Nú draga sömu plötu stærðir 2x3, en setja inn mynd í dálka númeruð 1, 4, 5 og 6. (tafla) (TR) (TD bakgrunn = "Images / mynd.jpg") 1 (/ td) (TD) 2 (/ td) (TD) 3 (/ td) (/ tr) (st) (td bakgrunnur = "Images / mynd.jpg") 4 (/ td) (td bakgrunnur = "Images / mynd.jpg") 5 ( / td) (td bakgrunnur = "Images / mynd.jpg") 6 (/ td) (/ tr) (/ töflu). Eftir að horfa á að við getum séð að bakgrunnurinn birtist aðeins í þeim frumum sem við skráðum og ekki allt borðið.

Cross-vafranum eindrægni staðnum

Það er svo sem a hlutur eins og a kross-vafranum eindrægni vefsíðu auðlind. Þetta þýðir að vefsvæði þitt er jafn vel birtist í mismunandi gerðum og útgáfum af vöfrum. Það ætti að vera HTML kóða og CSS stíll að aðlaga nauðsynleg vafra. Þar að auki, í nútímanum af sviði sími, eru margir vefur verktaki að reyna að búa til síður og aðlagað fyrir farsíma útgáfu og tölvu útlit.