Nesting tovuti: jinsi ya kufanya background picha html

Wengi novice mtandao wabunifu, tu kujiingiza katika kiini cha uumbaji wa tovuti, mara nyingi ajabu jinsi ya kufanya html usuli. Na kama baadhi yao wanaweza kukabiliana na tatizo hili, bado ni tatizo wakati wa kukaza upana mzima wa picha juu ya kufuatilia. Wakati huo huo Ningependa kuona tovuti visas identically juu browsers wote, hivyo ni lazima kutimiza mahitaji ya kuvuka browser. Unaweza kuweka background ya kwa njia mbili: kwa kutumia HTML na mitindo CSS. Kila mwenyewe akiamua chaguo bora. Bila shaka, CSS style ni rahisi zaidi, kwa sababu kanuni zake ni kuhifadhiwa katika faili tofauti na haina kuchukua wasemaji wa ziada katika vitambulisho tovuti kuu, lakini kwanza hebu fikiria njia rahisi kwa ajili ya kufunga picha kwenye background ya tovuti.

Basic HTML tags na kujenga background

Kwa hiyo, twende kwa suala la jinsi ya kufanya picha ya mandhari katika html kwenye skrini. Ili kuangalia tovuti nzuri, lazima kuelewa moja undani badala muhimu: ni wa kutosha tu ya kufanya background gradient au rangi yake ya rangi imara, lakini kama unahitaji kuingiza picha background, itakuwa si kunyoosha upana kamili wa kufuatilia. picha awali ilikuwa muhimu kuchukua au kufanya design yako mwenyewe na kiendelezi hiki, ambapo utakuwa kuonyesha ukurasa wa tovuti. Wakati tu picha ya mandhari tayari, Drag ni katika folda aitwaye «Images». Ndani yake, tutahifadhi picha zote kutumika, michoro na faili nyingine graphic. Folda hii lazima iko katika saraka ya mizizi na faili zako zote html. Sasa unaweza kuendelea na code. Kuna chaguzi kadhaa kwa ajili ya kuandika code, ambayo background itabadilika picha.

1. Andika tag sifa.
2. Style kupitia CSS katika HTML code.
3. Andika mitindo CSS katika faili tofauti.

Kama ilivyokuwa katika HTML kufanya picha background, kuamua, lakini ningependa kusema maneno machache kuhusu jinsi gani kuwa mojawapo zaidi. Njia ya kwanza ni kwa kuandika kupitia tag sifa kwa muda mrefu imekuwa ya kizamani. chaguo la pili ni kutumika mara chache sana, kwa sababu ni zamu kuwa mengi ya kanuni hiyo. chaguo la tatu ni ya kawaida na ufanisi. Hii ni mifano ya vitambulisho HTML:

1. Mbinu kurekodi kwanza kwa njia ya tag sifa (mwili) katika index.htm faili. Ni kuhifadhiwa katika fomu hii: (mwili background = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ mwili). Hiyo ni, kama tulikuwa na picha na cheo «Picture» na upanuzi JPG, na folda sisi aitwaye «Images», basi kuingia HTML-code kuangalia kama hii: (mwili background = "Picha / Picture.jpg") ... (/ mwili) .
2. Njia ya pili inahusisha kurekodi CSS style, lakini yaliyoandikwa katika faili moja na jina index.htm. (Mwili style = "background: url ( '../ Picha / Picture.jpg')").
3. Njia ya tatu ya Rekodi kufanywa kwa files mbili. hati kwa jina index.htm tag (kichwa) imeandikwa line kama: (kichwa) (kiungo rel = "XSLT" type = "text / css" href = "http: // tovuti / makala / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ kichwa). file inaitwa style.css style tayari kuandika: mwili {background: url (Picha / Picture.jpg ')}.

Kama ilivyokuwa katika HTML kufanya picha ya mandhari, tunaelewa. Sasa unahitaji kufikiri jinsi ya kunyoosha picha katika upana wa screen nzima.

Njia za kunyoosha picha ya mandhari kwa upana wa dirisha

Sisi kuwakilisha screen zetu kwa namna ya asilimia. Ni zinageuka kuwa upana mzima na urefu wa screen itakuwa 100% × 100%. Tunahitaji kunyoosha picha ya upana huu. Kuongeza faili ya picha kurekodi style.css line ambayo kunyoosha picha zaidi upana mzima na urefu wa kufuatilia. Kama yaliyoandikwa katika CSS style? Ni rahisi!

mwili

{

background: url (Picha / Picture.jpg ')

background-size: 100%; / * Hii post yanafaa kwa browsers kisasa zaidi * /

}

Hivyo sisi figured nje ya jinsi ya kufanya picha background katika html kwenye skrini. Pia kuna njia ya kurekodi katika faili index.htm. Ingawa njia hii na zilizopitwa na wakati, lakini kwa Kompyuta ni muhimu kujua na kuelewa. tag (kichwa) (style) div {background-size: cover, } (/ Style) (/ kichwa), rekodi hii ina maana kwamba sisi kutenga kitengo maalum kwa background, ambayo itakuwa nafasi nzuri zaidi ya upana mzima wa dirisha. Tumeona njia mbili, jinsi ya kufanya background picha html tovuti, ili picha ni aliweka na upana mzima wa screen katika vivinjari kisasa.

Jinsi ya kufanya background fasta

Kama kuamua kutumia picha kama background ya rasilimali mtandao baadaye, basi wewe tu haja ya kujua jinsi ya kufanya hivyo fasta, hivyo kuwa ni si aliweka katika urefu na wala nyara kuonekana estetiska. Tu kwa kutumia HTML code kujiandikisha kuongeza kidogo. Unahitaji faili style.css kuongeza maneno baada background: url (Picha / Picture.jpg ') fasta; au badala kuongezwa baada semicolon tofauti line - nafasi: kudumu. Hivyo, mandhari yako itakuwa ya kudumu. Wakati wa kusogeza maudhui kwenye tovuti, utaona kuwa maandishi mistari ni kusonga, lakini background bado katika mahali. Hivyo kujifunza jinsi ya kufanya html background picha, kwa njia kadhaa.

Kufanya kazi na Meza katika HTML

Wengi wasio na uzoefu watengenezaji mtandao, wanakabiliwa na meza na vitalu, mara nyingi hawaelewi jinsi ya kufanya html picha ya mandhari ya meza. Kama kila timu HTML mitindo na CSS, lugha ya programu ya tovuti ni haki rahisi. Na suluhisho la tatizo hili ni kuandika jozi ya mstari wa kanuni. Lazima Tayari tunajua kwamba kuandika meza ya safu na nguzo, kwa mtiririko huo, kama unahitajika kwa vitambulisho (tr) na (td). Kufanya meza background kwa mfano, ni muhimu ili kuongeza tag (meza), (tr) au (td) rahisi maneno kuonyesha picha ya kumbukumbu: asili = URL ya picha. Kwa ufafanuzi, sisi kutoa michache mifano.

Meza na picha badala ya background: HTML mifano

Chora jedwali 2x3 na kufanya picha ya mandhari kuhifadhiwa katika folder "Picha": (meza background = "Picha / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ jedwali). Hivyo meza yetu itakuwa inayotolewa katika background ya picha.

Sasa kuteka ukubwa huo sahani ya 2x3, lakini kuingiza picha katika nguzo namba 1, 4, 5 na 6. (meza) (tr) (td background = "Picha / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "Picha / Picture.jpg") 4 (/ td) (td background = "Picha / Picture.jpg") 5 ( / td) (td background = "Picha / Picture.jpg") 6 (/ td) (/ tr) (/ jedwali). Baada ya kuangalia tunaona kuwa background inaonekana tu katika seli hizo ambapo sisi aliyesajiliwa, na si meza nzima.

Msalaba-browser utangamano tovuti

Kuna kitu kama msalaba-browser utangamano mtandao wa rasilimali. Hii ina maana kwamba tovuti yako ni sawa vizuri kuonyeshwa katika aina mbalimbali na matoleo ya browsers. Lazima iwe HTML code na CSS mitindo ya Customize browsers lazima. Aidha, katika enzi ya kisasa ya simu za smart, wengi mtandao watengenezaji ni kujaribu kujenga tovuti na kutumika kwa ajili ya simu toleo na kompyuta kuangalia.