Nesting site: sa unsa nga paagi sa paghimo sa background hulagway html

Daghan ang novice web designers, lamang sa pagsusi sa diwa sa sa paglalang sa mga dapit, nga sagad maghunahuna kon sa unsang paagi sa pagbuhat sa larawan HTML background. Ug kon ang uban kanila mahimong atubang sa niini nga problema, kini mao ang pa sa usa ka problema sa panahon sa pagbuklad sa tibuok gilapdon sa sa larawan sa monitor. Sa samang higayon gusto ko nga sa pagtan-aw sa site nga gipakita identically sa tanan nga browsers, sa ingon nga kini kinahanglan sa pagtuman sa mga gikinahanglan sa krus-browser. mahimo mo ang background sa duha ka paagi: pinaagi sa paggamit sa HTML tags ug CSS estilo. Ang matag alang sa iyang kaugalingon mopili sa labing maayo nga kapilian. Siyempre, CSS estilo mas sayon, tungod kay sa iyang code nga gitipigan sa usa ka linain nga file ug dili pagkuha sa dugang nga mga mamumulong sa tags mga nag-unang dapit, apan tugoti una nato ang usa ka yano nga pamaagi alang sa pagbutang sa larawan sa background sa site.

Basic HTML tags sa paghimo sa background

Busa, moadto kita sa mga pangutana kon unsaon sa paghimo sa larawan background sa HTML sa screen. Aron sa pagtan-aw sa matahum nga site, kamo kinahanglan gayud nga makasabut sa usa ka hinoon importante nga detalye: kini mao ang igo lang sa paghimo sa usa ka pagdulhog background o nagpintal sa kini nga usa ka lig-on nga kolor, apan kon kamo kinahanglan nga sal-ot sa mga larawan background, dili kini oron ang bug-os nga gilapdon sa monitor. Ang larawan mao ang orihinal nga gikinahanglan aron sa pagkuha sa o sa paghimo sa inyong kaugalingon nga design uban sa niini nga extension, diin kamo ipakita panid sa site. Lamang sa diha nga ang larawan background mao ang andam na, guyoron kini ngadto sa usa ka folder nga si «Images». Sa niini, kita tipigan ang tanan nga mga ginamit nga mga larawan, animation ug uban pang mga graphic files. suksukanan sa papel Kini nga kinahanglan nga nahimutang sa gamut directory uban sa tanan sa imong html file. Karon nga imong mahimo mobalhin sa ug sa sa code. Adunay pipila ka mga kapilian alang sa pagsulat code, nga sa background mausab sa hulagway.

1. Isulat tag hiyas.
2. Pinaagi sa CSS estilo sa HTML code.
3. Isulat estilo CSS sa usa ka linain nga file.

Sama sa HTML sa paghimo sa larawan background, ikaw modesisyon, apan ako gusto nga mosulti og pipila ka mga pulong kon sa unsang paagi nga kini nga sa labing kamalaumon. Ang unang pamaagi mao ang pinaagi sa pagsulat pinaagi sa usa ka tag hiyas dugay na nga ang karaan. Ang ikaduha nga kapilian gigamit kaayo panagsa ra, tungod kay kini turns nga sa usa ka daghan sa mga sama nga code. Ang usa ka ikatulo nga kapilian mao ang labing komon ug epektibo. Ania ang panig-ingnan sa HTML tags:

1. Ang unang pamaagi recording pinaagi sa tag hiyas (lawas) diha sa index.htm file. Kini mao ang gitipigan sa niini nga matang: (sa lawas background = "folder_name / Nazvanie_kartinki.rasshirenie") (/ lawas). Nga mao, kon kita adunay usa ka hulagway sa mga titulo «Hulagway» ug extension jpg, ug ang folder nga atong ginganlan si «Images», nan ang HTML-code entry motan-aw sama niini: (sa lawas background = "Images / Picture.jpg") ... (/ lawas) .
2. Ang ikaduha nga pamaagi naglakip sa pagrekord sa usa ka CSS estilo, apan kini nahisulat nga diha sa sama nga file uban sa sa ngalan index.htm. (Lawas style = "background: url ( '../ Images / Picture.jpg')").
3. Ang ikatulo nga paagi sa recording nga gihimo sa duha ka mga file. Ang dokumento sa ngalan index.htm tag (ulo) nahisulat ingon nga usa ka linya: (ulo) (link pinaka- = "stylesheet" matang = "text / CSS" href = "http: // site / artikulo / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ ulo). Usa ka file nga gitawag style.css estilo na pagsulat: lawas {background: url (Images / Picture.jpg ')}.

Sama sa HTML sa paghimo sa larawan background, kita makasabut. Karon kamo kinahanglan nga sulbaron kon unsaon sa oron sa larawan tabok sa gilapdon sa tibuok screen.

Paagi sa oron sa larawan background sa gilapdon sa bintana

kita nagrepresentar sa atong screen sa porma sa usa ka porsiyento. Kini turns nga ang bug-os nga gilapdon ug gitas-on sa screen mahimong 100% × 100%. Kita kinahanglan nga oron ang larawan sa gilapdon niini. Idugang ngadto sa file nga larawan recording style.css linya nga oron ang larawan sa ibabaw sa bug-os nga gilapdon ug gitas-on sa monitor. Ingon sa nahisulat diha sa CSS estilo? Kini yano nga!

lawas

{

background: url (Images / Picture.jpg ')

background-gidak-on: 100%; / * Kini nga post mao ang angay alang sa kadaghanan sa modernong mga browsers * /

}

Busa kami kon unsaon sa paghimo sa usa ka hulagway background sa HTML sa screen. Adunay usab usa ka pamaagi sa pagrekord sa index.htm file. Bisan niini nga pamaagi ug sa karaan, apan alang sa mga magsusugod kini mao ang gikinahanglan nga mahibalo ug makasabut. Ang tag (ulo) (estilo) div {background-gidak-on: tabon; } (/ Style) (/ ulo), kini nga rekord nagpasabot nga mogahin kita og usa ka espesyal nga yunit alang sa background, nga posisyon sa ibabaw sa tibuok gilapdon sa sa bintana. Kami giisip duha ka mga paagi, kon sa unsang paagi sa paghimo sa usa ka background hulagway html site, mao nga ang mga larawan nga gituy-od sa tibuok gilapdon sa sa screen sa bisan unsa sa mga modernong mga browsers.

Unsa nga paagi sa paghimo sa usa ka natudlong sa background

Kon kamo mohukom sa paggamit sa usa ka hulagway nga sama sa background sa mga umaabot nga web kapanguhaan, nan kinahanglan kamo lang nga mahibalo sa unsa nga paagi sa paghimo niini nga malig-on, aron nga kini dili gituy-od ang gitas-on ug wala inagaw sa mga aesthetic panagway. Lamang pinaagi sa paggamit sa HTML code sa pagparehistro sa usa ka gamay nga dugang. Ikaw kinahanglan nga file style.css aron sa pagdugang sa usa ka hugpong sa mga pulong human sa background: url (Images / Picture.jpg ') natudlong; o sa baylo gidugang human sa semicolon lain nga linya - posisyon: natudlong. Mao kini ang, ang imong wallpaper nga natudlong. Atol sa scrolling sulod sa site, imong makita nga ang teksto linya pagbalhin, apan ang background nagpabilin sa dapit. Busa nakat-on kon sa unsang paagi sa pagbuhat sa HTML nga larawan background, sa daghang mga paagi.

Nagtrabaho uban sa mga lamesa sa HTML

Daghan ang walay kasinatian web developers, nag-atubang sa lamesa ug mga bloke, nga sagad dili makasabut sa unsa nga paagi sa paghimo sa background HTML larawan lamesa. Sama sa tanan nga mga teams HTML ug CSS estilo, ang web programming pinulongan minatarong, sa maayohon yano. Ug ang solusyon sa problema niini nga mao ang sa pagsulat sa usa ka parisan sa mga mga linya sa code. Ikaw kinahanglan nga nasayud na nga ang pagsulat sa usa ka lamesa sa mga talay, ug mga haligi, sa tinagsa, ingon sa gipakita sa mga tag (tr) ug (td). Aron sa paghimo sa background sa lamesa diha sa dagway sa usa ka larawan, kini mao ang gikinahanglan aron sa pagdugang sa tag (lamesa), (tr) o (td) sa usa ka yano nga hugpong sa mga pulong uban sa paghisgot sa mga pakisayran nga larawan: background = URL hulagway. Alang sa pagklaro, kita sa paghatag sa usa ka magtiayon nga sa mga panig-ingnan.

Lamesa uban sa usa ka hulagway sa baylo nga sa background: HTML mga panig-ingnan

-Drawing sa usa ka 2x3 lamesa, ug sa paghimo niini ang mga larawan background nga gitipigan sa suksukanan sa papel "Larawan": (lamesa background = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ lamesa). Busa ang atong lamesa nga madala sa background sa hulagway.

Karon sa pagkalos sa mao usab nga gidak-on plato sa 2x3, apan sal-ot sa usa ka hulagway sa mga haligi naisip 1, 4, 5 ug 6. (lamesa) (tr) (td background = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "Images / Picture.jpg") 4 (/ td) (td background = "Images / Picture.jpg") 5 ( / td) (td background = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ lamesa). Human sa pagtan-aw nga atong makita nga ang background makita lamang diha sa mga selula sa nga atong narehistro, ug dili ang tibook nga lamesa.

site krus-browser pagkaangay

Adunay mao ang ingon nga usa ka butang nga ingon sa usa ka krus-browser pagkaangay web kapanguhaan. Kini nagpasabot nga ang imong site parehong maayo ang gipakita sa lain-laing mga matang ug mga bersiyon sa mga browsers. Kini kinahanglan nga HTML code ug CSS estilo sa ipahiangay sa usa ka gikinahanglan nga browsers. Dugang pa, sa modernong panahon sa Smart phones, sa daghan nga mga web developers naningkamot sa paghimo sa mga dapit ug sa pahiangay, pabagay alang sa mobile nga bersyon ug sa usa ka computer-aw.