Isidleke: indlela yokwenza isithombe ngemuva html

Abaningi nabaqambi bamawebhu imfundamakhwela, kuphela lokumba okushiwo ukudalwa amasayithi, ngizibuze ukuthi ukwenza isithombe html ngemuva. Futhi uma ezinye zazo kungaba ukubhekana nale nkinga, kusenzima inkinga ngesikhathi esisuka yonke ububanzi isithombe qapha. Ngesikhathi esifanayo Ngingathanda ukubona indawo ziboniswa ncamashí kuzo zonke iziphequluli, ngakho-ke kufanele agcwalise nezidingo cross-lesiphequluli. Ungasetha ngemuva ngezindlela ezimbili: ngokusebenzisa tags kanye CSS izitayela. Ngamunye ngoba yena akhetha ukhetho best. Yiqiniso, CSS isitayela zibelula, ngoba ikhodi yayo lilondolozwe ifayela ehlukile futhi akusho kuthathe izipikha esingeziwe amathegi isayithi main, kodwa ake siqale sicabangele indlela elula ufakile isithombe ngemuva isayithi.

HTML Yesisekelo e- ukwakha ngemuva

Ngakho, siye umbuzo zendlela yokwenza umfanekiso ongemuva HTML esikrinini. Ukuze ukubheka indawo enhle, kumelwe uqonde umniningwane owodwa kunalokho ezibalulekile: kwanele nje ukwenza ngemuva umyela noma ukupenda kube umbala okuqinile, kodwa uma udinga ukufaka isithombe ngemuva, ngeke yokwelula ububanzi egcwele qapha. Isithombe wayedabuka ezidingekayo ukuze ayothatha noma wenze umklamo wakho siqu lesi sandiso, lapho izoveza wesayithi. Kuphela lapho isithombe sangemuva usulungile, idonsele kufolda okuthiwa «Google». Kuyo, sizogcina zonke izithombe ezisetshenziswa, animations namanye amafayela ingcaca. Le folda kufanele zitholakale lwemibhalo impande nge wonke amafayela akho html. Manje ungakwazi udlulele futhi ikhodi. Kunezindlela eziningana ongakhetha kuzona ukuze uthole ikhodi lokubhala, lapho background zizoshintsha isithombe.

1. Bhala umaki ngemfanelo.
2. Ngokusebenzisa CSS isitayela e ikhodi ye-HTML.
3. Bhala CSS izitayela kufayela ehlukile.

Njengoba le-HTML ukwenza isithombe sangemuva, unquma, kodwa ngingathanda ukusho amazwi ambalwa mayelana kuyoba indlela elilungile kakhulu. Sekuyisikhathi eside Indlela yokuqala ngokubhala ngokusebenzisa ngemfanelo ithegi kwaba akusebenzi. Indlela yesibili isetshenziswa kakhulu kuyaqabukela, ngoba kuvela ukuthi eziningi ikhodi efanayo. A indlela yesithathu yisona esikhulunywa abantu abaningi futhi ngempumelelo. Nazi izibonelo tags:

1. Eyokuqala indlela yokuqopha ngokusebenzisa umaka isibaluli (umzimba) kufayela index.htm. Lilondolozwe leli fomu: (umzimba ngemuva = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ umzimba). Okusho ukuthi, uma siba isithombe nge isihloko «Isithombe» nokwelulwa JPG, futhi ifolda thina okuthiwa «Google» ke entry-HTML ikhodi izobukeka kanje: (umzimba ngemuva = "Google / Picture.jpg") ... (/ umzimba) .
2. Indlela sesibili kuhilela ukuqopha isitayela CSS, kodwa kulotshiwe ifayela elifanayo elinegama index.htm. (Umzimba style = "isizinda:-url ( 'Google ../ / Picture.jpg')").
3. Indlela yesithathu ukuqoshwa senziwa amafayela amabili. Lowo Mbhalo wangonyaka we nge ithegi yegama index.htm (ikhanda) kulotshiwe umugqa esinjalo: (ikhanda) (isixhumanisi rel = "Lwesitayelashidi" uhlobo = "text / css" href = "http: // site / sihloko / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ ikhanda). Ifayela ngokuthi style.css isitayela kakade ukubhala: umzimba {ngemuva:-url (-Google / Picture.jpg ')}.

Njengoba le-HTML ukwenza isithombe sangemuva, siyazwisisa. Manje udinga ukuthola indlela yokwelula isithombe ngaphesheya ububanzi isikrini sonke.

Izindlela yokwelula isithombe sangemuva ukuze ububanzi window

Simelela isikrini yethu ngesimo iphesenti. It kuvela ukuthi yonke ububanzi nobude kwesikrini kuyoba 100% × 100%. Sidinga yokwelula isithombe kule ububanzi. Engeza ifayela nesithombe sokurekhoda style.css umugqa uyakwelula isithombe phezu kwawo wonke ububanzi nobude qapha. Njengoba nje kulotshiwe ku-CSS isitayela? Kulula!

umzimba

{

ingemuva:-url (-Google / Picture.jpg ')

isizinda-usayizi: 100%; / * Lokhu okuthunyelwe kufanelekile kuziphequluli eziningi zalezi zinsuku * /

}

Ngakho esiphethweni kanjani isizinda isithombe html esikrinini. Kukhona indlela ukuqopha ifayela index.htm. Nakuba le ndlela futhi yisikhathi, kodwa Wabasaqalayo kubalulekile ukwazi nokuqonda. Ithegi (ikhanda) (style) div {ngemuva-usayizi: ikhava; } (/ Isitayela) (/ ikhanda), leli rekhodi kusho ukuthi thina ukwaba uphiko oluyisipesheli sangemuva okuzokwenziwa isebangeni phezu kwawo wonke ububanzi iwindi. Sesixoxe ngezindlela ezimbili, indlela yokwenza ingemuva isithombe html indawo, ukuze isithombe sinwebiswe yonke ububanzi isikrini noma iziphi iziphequluli yesimanje.

Indlela yokwenza isizinda fixed

Uma unquma ukusebenzisa isithombe njengoba isizinda isisetshenziswa web esizayo, khona-ke nje kudingeka wazi indlela yokwenza ukuthi siyixazulule, ngakho akulona welulela ubude futhi akazange konakalisa ukubukeka yobuhle. Vele ngokusebenzisa ikhodi ye-HTML ukubhalisa kwalokho encane. Udinga ukufaka style.css ukwengeza ibinzana ngemva ingemuva:-url (-Google / Picture.jpg ') fixed; noma esikhundleni wanezela emva isemikholoni oseceleni - isikhundla: isilungisiwe. Ngakho, isithombe sakho sangemuva kuzolungiswa. Phakathi ebonakalayo okuqukethwe kusayithi, uzobona ukuthi umbhalo imigqa lihamba, kodwa ngemuva usekhona. Ngakho zafunda isithombe sangemuva html, ngezindlela eziningana.

Ukusebenza Amathebula e-HTML

Abaningi Onjiniyela web ongenalwazi, sibhekene kumathebula amabhlogo, ngokuvamile abaqondi ukuthi indlela yokwenza ithebula html isithombe sangemuva. Njengazo zonke amaqembu-HTML futhi CSS izitayela, ulimi web izinhlelo oluphakeme elula. Futhi isixazululo sale nkinga ukubhala pair of imigqa yekhodi. Kufanele kakade ukuthi ubhala ithebula lemigqa namakholomu, ngokulandelana, njengoba kuboniswa tags (tr) no- (td). Ukuze wenze ngemuva kwetafula ngesimo isithombe, kubalulekile ukuze ungeze ithegi (ithebula), (tr) noma (td) ibinzana elula ebhekisela inkomba isithombe: isizinda = URL izithombe. Ngokucaca, sikunikeza ambalwa izibonelo.

Ithebula nge isithombe esikhundleni ngemuva: izibonelo-HTML

Dweba ithebula 2x3 futhi kwenze kube isithombe sangemuva elondolozwe kufolda "Google": (etafuleni ngemuva = "Google / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ ithebula). Ngakho etafuleni lethu ngeke badonswe isizinda isithombe.

Manje ukudweba okufanayo ipuleti osayizi 2x3, kodwa ufaka isithombe amakholomu olunezinombolo 1, 4, 5 nele- 6. (etafuleni) (tr) (td isizinda = "Google / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td isizinda = "Google / Picture.jpg") 4 (/ td) (td isizinda = "Google / Picture.jpg") 5 ( / td) (td isizinda = "Google / Picture.jpg") 6 (/ td) (/ tr) (/ ithebula). Ngemva kokubukela singabona ukuthi ngemuva livela kuphela labo amaseli esiphila bhalisiwe, hhayi wonke etafuleni.

Cross-isiphequluli kwedivayisi isayithi

Kukhona into okuthiwa cross-isiphequluli isisetshenziswa kwedivayisi sewebhu. Lokhu kusho ukuthi isayithi yakho ngokulinganayo ukuboniswa kahle izinhlobo ezahlukene futhi izinguqulo iziphequluli. Kufanele kube -HTML ikhodi kanye CSS izitayela ngokwezifiso a iziphequluli kunesidingo. Ngaphezu kwalokho, ngo-enkathini yesimanje kwamafoni smart, onjiniyela abaningi web uzama ukudala amasayithi kanye aguqulelwe inguqulo yeselula nokubheka ikhompyutha.