Layout ng website: kung paano gumawa ng background sa html

Maraming mga nagsisimula na nakarating lamang sa puso ng paglikha ng mga website ay kadalasang nakapagtataka kung paano sa html ang gumawa ng background ng isang larawan. At kung maunawaan ng ilang tao ang problemang ito, may mga problema pa rin kapag lumalawak ang imahe sa buong lapad ng monitor. Kasabay nito, nais kong maipakita ang parehong site sa lahat ng mga browser, kaya dapat na matugunan ang kinakailangan ng cross-browser compatibility. Maaari mong itakda ang background sa dalawang paraan: gamit ang mga tag ng HTML at estilo ng CSS. Ang bawat tao'y pinipili ang kanyang sarili na ang pinakamainam na pagpipilian. Siyempre, ang estilo ng CSS ay mas maginhawa, dahil ang code nito ay naka-imbak sa isang hiwalay na file at hindi tumagal ng hindi kinakailangang mga haligi sa pangunahing mga tag ng site, ngunit bago namin isaalang-alang ang isang simpleng paraan ng pag-install ng isang imahe sa background ng site.

Mga pangunahing tag ng HTML para sa paglikha ng isang background

Kaya, lumipat tayo sa tanong kung paano gumawa ng isang larawan sa background sa html sa buong screen. Upang maging maganda ang hitsura ng site, kakailanganin mong maunawaan ang isang mahalagang mahalagang detalye: sapat na upang gumawa ng isang gradient na background o pintura ito ng kulay na monochrome, ngunit kung kailangan mong maglagay ng larawan sa background, hindi ito umaabot sa buong lapad ng monitor. Ang larawan ay dapat na napili sa una o independiyenteng ginawa ng isang disenyo na may tulad na isang extension, kung saan mayroon kang isang pahina ng site na ipinapakita. Pagkatapos lamang handa ang imaheng pang-background, isinasalin namin ito sa folder na may pangalang "Mga Larawan". Sa loob nito ay iimbak namin ang lahat ng ginamit na mga larawan, mga animation at iba pang mga graphic na file. Ang folder na ito ay dapat na nasa direktoryo ng root sa lahat ng iyong mga file na html. Ngayon ay maaari kang pumunta sa code. Mayroong ilang mga pagpipilian para sa pagsusulat ng code, kung saan ang background ay magbabago sa isang larawan.

1. Isulat ang katangian ng tag.
2. Sa pamamagitan ng estilo ng CSS sa HTML code.
3. Isulat ang estilo ng CSS sa isang hiwalay na file.

Tulad ng sa HTML, upang gumawa ng isang background ng isang larawan, magpasya ka, ngunit nais kong sabihin ng ilang mga salita tungkol sa kung paano ito magiging pinakamainam. Ang unang paraan sa tulong ng pagsulat sa pamamagitan ng attribute ng tag ay matagal nang hindi napapanahon. Ang ikalawang opsyon ay ginagamit sa mga bihirang kaso, dahil lamang nakakakuha ka ng maraming parehong code. At ang ikatlong pagpipilian ay ang pinaka-karaniwan at epektibo. Narito ang mga HTML na halimbawa ng mga tag:

1. Ang unang paraan upang isulat sa pamamagitan ng katangian ng katawan sa index.htm file. Ito ay nakasulat sa form na ito: (background ng katawan = "Folder_name / Picture_name.extension") (/ body). Iyon ay, kung mayroon kaming isang larawan na pinangalanang "Larawan" at isang extension ng JPG, at pinangalanan namin ang folder bilang "Mga Larawan", pagkatapos ang HTML code ay magiging ganito: (body background = "Images / Picture.jpg") ... (/ body) .
2. Ang ikalawang paraan ng pagsusulat ay nakakaapekto sa estilo ng CSS, ngunit isinulat sa parehong file na tinatawag na index.htm. (Estilo ng katawan = "background: url ('../ Images / Picture.jpg')").
3. At ang ikatlong paraan ng pagtatala ay ginagawa sa dalawang mga file. Sa dokumento na tinatawag na index.htm, ang sumusunod na tag ay nakasulat sa tag ng ulo: (ulo) (link rel = "stylesheet" type = "text / css" href = "http: // site / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_file ") (/ head). At sa estilo ng file na may pangalan na style.css isinulat na namin ang: body {background: url (Images / Picture.jpg ')}.

Tulad ng sa HTML upang gumawa ng isang larawan sa background, kami disassembled. Ngayon kailangan mong maunawaan kung paano i-stretch ang larawan sa buong lapad ng buong screen.

Mga paraan upang mabatak ang larawan sa background sa lapad ng window

Isipin natin ang aming screen bilang porsyento. Ito ay lumiliko out na ang buong lapad at haba ng screen ay magiging 100% x 100%. Kailangan nating iabot ang larawan sa lapad na ito. Idagdag sa imaheng entry sa estilo.css maghain ng isang string na haharapin ang imahe sa buong lapad at haba ng monitor. Paano ito isinulat sa estilo ng CSS? Ito ay simple!

Katawan

{

Background: url (Images / Picture.jpg ')

Laki ng background: 100%; / * Ang entry na ito ay angkop para sa karamihan sa mga modernong browser * /

}

Kaya naiisip namin kung paano gumawa ng isang larawan sa background sa html sa buong screen. Mayroon ding isang paraan upang isulat sa index.htm file. Bagaman ang pamamaraan na ito ay hindi na ginagamit, kinakailangan para sa mga nagsisimula na malaman at maunawaan ito. Sa tag (ulo) (estilo) div {background-size: cover; } (/ Estilo) (/ ulo) ang rekord na ito ay nangangahulugang pumili kami ng isang espesyal na bloke para sa background, na kung saan ay nakaposisyon sa buong lapad ng window. Tiningnan namin ang 2 mga paraan upang gawin ang background ng site ng html na imahe, upang ang imahe ay mabatak sa buong lapad ng screen sa alinman sa mga modernong browser.

Paano gumawa ng isang nakapirming background

Kung magpasya kang gamitin ang larawan bilang ang background ng hinaharap na mapagkukunan ng web, kailangan mo lamang malaman kung paano ito ayusin, upang hindi ito mahatakahan ang haba at hindi palayawin ang aesthetic na hitsura. Ito ay sapat lamang upang gamitin ang HTML code upang isulat ang maliit na add-on na ito. Kailangan mong magdagdag ng isang parirala sa estilo.css file pagkatapos ng background: url (Imahe / Picture.jpg ') naayos; O sa halip ng pagdaragdag ng isang hiwalay na linya pagkatapos ng tuldok - posisyon: naayos. Sa ganoong paraan, ang iyong larawan sa background ay magiging pa rin. Habang ini-scroll ang nilalaman sa site, makikita mo na ang mga linya ng teksto ay gumagalaw, at ang background ay nananatili sa lugar. Kaya natutunan mo kung paano gumawa ng background sa html, sa maraming paraan.

Paggawa gamit ang isang talahanayan sa HTML

Maraming mga walang karanasan sa mga web developer, na nahaharap sa mga talahanayan at mga bloke, ay madalas na hindi nauunawaan kung paano gumawa ng isang larawan sa html isang background ng talahanayan. Tulad ng lahat ng mga command na estilo ng HTML at CSS, ang web programming language na ito ay medyo simple. At ang solusyon sa problemang ito ay pagsusulat ng ilang linya ng code. Dapat mong malaman na ang pagsulat ng mga talahanayan ng talahanayan at mga haligi ay tinutukoy ayon sa mga tag (tr) at (td). Upang gawin ang background ng talahanayan bilang isang imahe, kailangan mong magdagdag ng isang simpleng parirala sa tag (talahanayan), (tr) o (td) na may link sa larawan: background = URL ng larawan. Para sa kalinawan, nagbigay kami ng ilang halimbawa.

Mga table na may larawan sa halip na isang background: Mga halimbawa ng HTML

Kumuha ng 2x3 table at gawin itong larawan sa background na naka-save sa folder ng Mga Larawan: (table background = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (Td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ table). Kaya ang aming talahanayan ay ipinta sa background ng larawan.

Ngayon gumuhit ng parehong table na may sukat 2х3, ngunit ipapasok namin ang larawan sa mga bar sa ilalim ng numero 1, 4, 5 at 6. (table) (tr) (td background = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ Td) (/ 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) (/ table). Pagkatapos ng pagtingin, nakikita namin na ang background ay lumilitaw lamang sa mga cell na kung saan kami ay nakarehistro, ngunit hindi sa buong talahanayan.

Cross-browser site

Mayroon pa ring bagay na tulad ng cross-browser na mapagkukunan ng isang web resource. Nangangahulugan ito na ang mga pahina ng site ay ipapakita sa parehong paraan sa iba't ibang uri at bersyon ng mga browser. Kasabay nito, kailangan mong i-customize ang HTML code at estilo ng CSS para sa mga kinakailangang browser. Bilang karagdagan, sa modernong panahon ng pag-unlad ng smartphone, maraming mga web developer ang nagsisikap na lumikha ng mga site na iniangkop para sa parehong mga bersyon ng mobile at isang view ng computer.