Maraming mga baguhan na taga-disenyo ng layout, na nag-iisip lamang sa kakanyahan ng paglikha ng mga website, ay madalas na nagtataka kung paano gawing imahe ang background sa html. At kahit na ang ilang mga tao ay maaaring malaman ang gawaing ito, ang mga problema ay lumitaw pa rin kapag lumalawak ang imahe sa buong lapad ng monitor. Kasabay nito, nais kong maipakita ang site nang pantay-pantay sa lahat ng mga browser, kaya dapat matugunan ang kinakailangan sa cross-browser. Maaari mong itakda ang background sa dalawang paraan: gamit ang estilo ng CSS. Ang bawat tao'y pinipili ang pinaka para sa kanilang sarili pinakamahusay na pagpipilian. tiyak, CSS style mas maginhawa, dahil nakaimbak ang code nito hiwalay na file at hindi kumukuha ng mga karagdagang column sa mga pangunahing tag ng site, ngunit isasaalang-alang muna namin ang isang simpleng paraan ng pag-install ng isang imahe sa background ng site.

Pangunahing HTML tag para sa paggawa ng background

Kaya, lumipat tayo sa tanong, background sa html sa buong screen. Upang ang site ay magmukhang maganda, kailangan mong maunawaan ang isang medyo mahalagang detalye: sapat na upang gumawa lamang ng isang gradient na background o pintura ito ng isang solidong kulay, ngunit kung kailangan mong magpasok ng isang larawan sa background, hindi ito mag-uunat sa buong lapad ng monitor. Sa una, kailangan mong pumili ng isang imahe o gumawa ng isang disenyo sa iyong sarili gamit ang extension kung saan ipapakita ang iyong pahina ng site. Pagkatapos lamang na handa na ang larawan sa background, ilipat ito sa isang folder na tinatawag na "Mga Larawan". Dito ay iimbak namin ang lahat ng mga larawan, animation at iba pang mga graphic na file na ginagamit namin. Ang folder na ito ay dapat na nasa direktoryo ng ugat sa lahat ng iyo html na mga file. Ngayon ay maaari kang magpatuloy sa code. Mayroong ilang mga opsyon para sa pagsusulat ng code na magpapabago sa background sa isang larawan.

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

Nasa iyo kung paano gawing imahe ang background sa HTML, ngunit gusto kong magsabi ng ilang salita tungkol sa kung paano ito magiging pinakamainam. Ang unang paraan, gamit ang pagsusulat sa pamamagitan ng katangian ng tag, ay matagal nang hindi napapanahon. Ang pangalawang opsyon ay ginagamit sa napakabihirang mga kaso, dahil lamang sa maraming parehong code ang nakuha. At ang pangatlong opsyon ay ang pinakakaraniwan at epektibo. Dito Mga halimbawa ng HTML mga tag:

1. Ang unang paraan ng pagsulat ay sa pamamagitan ng tag attribute (body) sa index.htm file. Ito ay nakasulat sa sumusunod na anyo: (body background= "Folder_name/Image_name.extension")(/body). Ibig sabihin, kung mayroon kaming larawan na may pangalang "Larawan" at extension ng JPG, at pinangalanan namin ang folder na "Mga Larawan", magiging ganito ang hitsura ng HTML code entry: (body background="Images/Picture.jpg") … (/katawan) .
2. Ang pangalawang paraan ng pag-record ay nakakaapekto sa estilo ng CSS, ngunit nakasulat sa parehong file na tinatawag na index.htm. (body style="background: url("../Images/Picture.jpg")").
3. At ang ikatlong paraan ng pag-record ay ginawa sa dalawang file. Sa isang dokumentong tinatawag na index.htm, ang sumusunod na linya ay nakasulat: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). At sa style file na tinatawag na style.css naisulat na namin ang: body (background: url(Images/Picture.jpg")).

Napag-usapan namin kung paano gumawa ng background na imahe sa HTML. Ngayon ay kailangan mong maunawaan kung paano i-stretch ang imahe sa lapad ng buong screen.

Mga paraan upang i-stretch ang isang background na imahe sa lapad ng window

Isipin natin ang aming screen sa anyo ng porsyento. Lumalabas na ang buong lapad at haba ng screen ay magiging 100% x 100%. Kailangan nating i-stretch ang imahe sa ganitong lapad. Magdagdag tayo ng linya sa entry ng imahe sa style.css file, na mag-uunat sa imahe sa buong lapad at haba ng monitor. Paano ito nakasulat sa estilo ng CSS? Ito ay simple!

background: url(Mga Larawan/Larawan.jpg")

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

Kaya naisip namin kung paano gumawa ng isang larawan bilang isang background sa html upang punan ang buong screen. Mayroon ding paraan upang magsulat sa index.htm file. Bagama't luma na ang pamamaraang ito, kinakailangan para sa mga baguhan na malaman at maunawaan ito. Sa tag na (head)(style) div ( background-size: cover; ) (/style) (/head), ang entry na ito ay nangangahulugan na pumipili kami ng isang espesyal na block para sa background, na ipoposisyon sa buong lapad ng ang bintana. Tumingin kami sa 2 paraan upang gawing HTML na imahe ang background ng isang website upang ang larawan ay umaabot sa buong lapad ng screen sa anumang modernong browser.

Paano gumawa ng isang nakapirming background

Kung magpasya kang gumamit ng isang larawan bilang background ng isang mapagkukunan sa web sa hinaharap, kailangan mo lamang malaman kung paano ito gagawing hindi gumagalaw upang hindi ito mag-inat sa haba at masira ang aesthetic na hitsura. Sapat na madaling isulat ang maliit na karagdagan na ito nang may tulong. Kailangan mong magdagdag ng isang parirala sa style.css file pagkatapos ng background: url(Images/Picture.jpg") naayos; o sa halip ay magdagdag ng hiwalay na linya pagkatapos ng semicolon - position: fixed. Kaya, ang iyong background na larawan ay magiging hindi gumagalaw. Sa panahon Ang pag-scroll sa nilalaman sa site, makikita mo na ang mga linya ng teksto ay gumagalaw, ngunit ang background ay nananatili sa lugar Kaya natutunan mo kung paano gawing imahe ang background sa html sa maraming paraan.

Paggawa gamit ang isang talahanayan sa HTML

Maraming mga walang karanasan na web developer, kapag nahaharap sa mga talahanayan at mga bloke, ay madalas na hindi nauunawaan kung paano gumawa ng isang larawan bilang background ng talahanayan sa HTML. Tulad ng lahat ng mga istilo ng CSS, medyo simple ang web programming language na ito. At ang solusyon sa naturang problema ay ang magsulat ng ilang linya ng code. Dapat alam mo na ang pagsusulat mga hilera ng mesa at ang mga column ay itinalaga ayon sa pagkakabanggit bilang mga tag (tr) at (td). Upang gawing background ang talahanayan sa anyo ng isang imahe, kailangan mong magdagdag ng isang simpleng parirala sa tag na (talahanayan), (tr) o (td) na nagsasaad ng link sa larawan: background = URL ng larawan. Para sa kalinawan, magbigay tayo ng ilang halimbawa.

Mga talahanayan na may larawan sa halip na background: Mga halimbawa ng HTML

Gumuhit tayo ng 2x3 table at gawing larawan ang background nito na naka-save sa folder na “Mga Larawan”: (background ng talahanayan = “Mga Larawan/Larawan.jpg”) (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/table). Sa ganitong paraan ang aming talahanayan ay ipininta sa background ng larawan.

Ngayon, iguhit natin ang parehong plate na may sukat na 2x3, ngunit magpasok ng larawan sa mga column na may numerong 1, 4, 5 at 6. (table)(tr)(td background = “Mga Larawan/Larawan.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td background = “Mga Larawan/Larawan.jpg”)4(/td) (td background = “Mga Larawan/Larawan.jpg”) 5( /td) (td background = “Mga Larawan/Larawan.jpg”)6(/td) (/tr) (/talahanayan). Pagkatapos tingnan, nakikita namin na ang background ay lilitaw lamang sa mga cell kung saan kami nakarehistro, at hindi sa buong talahanayan.

Cross-browser compatibility ng site

Mayroon ding isang bagay tulad ng cross-browser compatibility ng isang web resource. Nangangahulugan ito na ang mga pahina ng site ay ipapakita nang pantay na tama sa iba't ibang uri at mga bersyon ng browser. Sa kasong ito, kailangan mong ayusin ang HTML code at CSS style sa mga kinakailangang browser. Bilang karagdagan, sa modernong panahon ng pag-unlad ng smartphone, maraming mga web developer ang sumusubok na lumikha ng mga website na inangkop para sa mga bersyon ng mobile at sa ilalim ng view ng computer.

Vlad Merzhevich

Dahil sa mga kakaibang katangian ng mga web page, ang mga larawan sa background ay may mahalagang papel sa layout ng mga dokumento ng site. Kasabay nito, aktibong kasangkot sila sa iba't ibang bagay, halimbawa, pag-automate ng proseso ng pag-attach ng mga larawan sa teksto, paglikha ng mga gradient transition, at, siyempre, pagdaragdag ng background sa ilalim ng nilalaman. Nasa ibaba ang ilang aspeto ng paggamit ng mga larawan sa background.

Background sa isang web page

Ang pagtatakda ng larawan sa background sa isang web page ay tradisyonal na nangyayari sa pamamagitan ng katangian ng background ng tag. .

Ang pattern na ito ay paulit-ulit nang pahalang at patayo, kaya pinupunan ang buong window ng browser. Malinaw na walang mga espesyal na opsyon para sa pagkamalikhain dito, kaya buksan natin ang mga estilo at tingnan kung ano ang maaaring gawin gamit ang CSS.

Ang CSS ay may limang katangian na kumokontrol sa larawan sa background: ang pagdaragdag, posisyon, at pag-uulit nito. Gayunpaman, ang lahat ng parameter na ito ay pinapalitan ng isang unibersal na property, background , na gagamitin namin sa hinaharap.

Pagdaragdag ng wallpaper

Ang pagdaragdag ng larawan ay nangyayari sa pamamagitan ng pagtatakda ng address ng larawan gamit ang url na keyword. Upang kontrolin ang pag-uulit ng isang imahe, ang mga argumentong walang-uulit, ulitin-x (ulitin nang pahalang) at ulitin-y (ulitin nang patayo) ay ginagamit. Salamat dito, maaari mong makuha ang web page na ipinapakita sa Fig. 1.

Upang magtakda ng larawan sa isang web page, kailangan mong magdagdag ng isang background style property sa BODY selector, tulad ng ipinapakita sa Halimbawa 1.

Larawan sa background SA sa halimbawang ito

Ang graphic na target.gif ay tinukoy bilang background ng isang web page nang hindi inuulit ang larawan. Upang pigilan ang imahe na magkasya nang mahigpit sa mga gilid ng browser, inilipat ito ng 30 pixels sa kanan at 20 pixels pababa mula sa orihinal na posisyon nito.

Pag-uulit ng isang pattern

Dahil sa katotohanan na maaari mong itakda ang pattern ng background upang ulitin nang pahalang o patayo, maraming mga pagpipilian ang magagamit para sa disenyo ng mga web page. Halimbawa, upang lumikha ng isang patayong guhit sa kaliwang gilid (Larawan 2), kakailanganin mo ang larawang ipinapakita sa Fig. 3.

Ang disenyo ay dapat na tulad na ito ay magkasya nang patayo nang walang kapansin-pansing mga tahi, at bumubuo rin ng isang solong kabuuan na may tinukoy na kulay ng background ng web page.

Katulad nito, maaari mong ulitin ang background nang pahalang, halimbawa, sa pamamagitan ng paggawa ng gradient at pagtatakda nito bilang isang background na imahe (Larawan 4).

Upang makuha ang web page na ipinapakita sa Fig. 4, kakailanganin mo munang gumawa ng larawan na may gradient transition. Ang lapad ay sapat na upang tukuyin ang 20-40 pixels, at ang taas ng imahe ay nakasalalay sa layunin ng dokumento at ang inaasahang taas ng nilalaman ng web page. Huwag din kalimutan na ang isang malaking pagguhit ay hahantong sa pagtaas ng lakas ng tunog. graphic na file. At ito ay negatibong makakaapekto sa bilis ng paglo-load nito at, sa huli, hahantong sa mas mabagal na pagpapakita sa background. Para sa kasong ito, medyo angkop ang isang larawan ng 30x200 pixels (Larawan 5).

Ipinapakita ng Halimbawa 3 ang HTML code upang lumikha ng gradient na background.

Halimbawa 3: Pahalang na pag-uulit sa background

Ang isang gradient na disenyo ay napupunta nang maayos sa isang solong kulay na bloke, kaya sa halimbawang ito ay nagdaragdag kami ng isang layer upang ipakita ang nilalaman ng web page.

Pagdaragdag ng larawan sa teksto

Sa pamamagitan ng paggamit ng larawan sa background, maaari mong i-automate ang proseso ng pagdaragdag ng mga graphics sa partikular na text, gaya ng mga heading. Upang gawin ito, gamitin ang background universal property, na inilalapat sa gustong selector. Ang halaga ay ang landas patungo sa larawan at, upang maiwasan itong maulit, ang argumentong hindi na umuulit (halimbawa 4).

Halimbawa 4: Pagdaragdag ng larawan

Heading

Pangunahing teksto

Tulad ng ipinapakita sa halimbawang ito, maaaring ilipat ang larawan nang pahalang at patayo na may kaugnayan sa orihinal nitong posisyon, bilang default ito ang kaliwang sulok sa itaas elemento ng bloke. Ang paglilipat ng background ay nagbibigay-daan sa iyo na iposisyon ang imahe na may kaugnayan sa teksto sa nais na paraan. Upang maiwasang mag-overlap ang text sa larawan, dapat mong idagdag ang padding-left property, dahil sa kung saan ang teksto ay inililipat sa kanan ng tinukoy na distansya. Ito ay indibidwal sa bawat kaso at kadalasang katumbas ng lapad ng larawan kasama ang nais na espasyo sa pagitan ng larawan at ng teksto.

17.10.2015

Hindi pa

Hi sa lahat!
Ipagpatuloy natin ang pag-aaral ng mga pangunahing kaalaman sa HTML.
Sa araling ito sasabihin ko sa iyo at magpapakita ng mga halimbawa paano gumawa ng background mula sa isang kulay o larawan sa isang HTML na pahina.
Ito ay medyo simple!
Magsimula tayo sa kulay!
Sa palagay ko ay hindi mo ito pinalampas, kung saan sinabi ko sa iyo kung paano baguhin ang kulay ng teksto at sa dulo ng artikulo ay nagbigay ako ng mga code para sa iba't ibang kulay at lilim. Bakit ko ipinaalala sa iyo ang araling ito? Oo, dahil may mesa na may mga nakahandang color code, kunin ang mga ito at pagsasanay kaagad sa araling ito.
Kaya, kung paano gumawa ng kulay ng background sa HTML...

Kulay ng background sa HTML

Ang default na kulay ng background sa isang HTML na dokumento ay puti. Paano itakda ang kulay ayon sa ninanais?
Ang katangiang "bgcolor" ay makakatulong sa amin dito. Upang magpinta sa background, idagdag ang attribute na ito sa tag na "body":

O ganito:

Narito ang kumpletong HTML code:

Ang teksto ng pahina ay magiging berde at ang background ay magiging itim.

Ang resulta ay magiging ganito:

Kung gusto mong gumawa ng background mula sa isang larawan, pagkatapos ay idagdag ang attribute na "background" sa tag na "body":

Punan ang anumang larawan kung nasaan ang iyong web page (sa aking halimbawa, ang page ay tinatawag na “fon” na may extension na “.gif”):

Narito ang kumpletong HTML code:

Ang resulta ay magiging ganito:

Kung ang larawan sa background ay matatagpuan sa folder ng mga imahe o ibang folder, magiging ganito ang hitsura nito:

Narito ang kumpletong HTML code:

Teksto ng pahina sa magandang background.

Iyon lang para sa araw na ito! Sa tingin ko ang aralin ay hindi mahirap at naunawaan mo ang lahat. Kung mayroon kang mga katanungan, sumulat sa mga komento.
Inaasahan kong makita ka sa mga susunod na aralin.

Nakaraang post
Susunod na entry

2 boto

Maligayang pagdating sa aking blog. Patuloy kaming nagkakaintindihan html pangunahing kaalaman. Ang tutorial na ito ay magiging napakasimple at kawili-wili na inaasahan kong gusto mong matuto nang higit pa tungkol sa mga programming language. Sa loob lamang ng ilang minuto matututunan mo kung paano gumawa ng isang larawan bilang isang background sa HTML at makamit ang mahusay na mga resulta.

Magsasalita din ako tungkol sa ilang mga nuances na gagawing makinis at maganda ang background hangga't maaari. Well, simulan na natin?

Pagpili ng larawan

Gusto kong magsimula sa pamamagitan ng pagpili ng isang imahe. Para mas maging pantay at maganda ka sa page, at hindi mo na kailangang mag-abala sa mga sukat at pagkakahanay. Iminumungkahi ko agad na maghanap ng mga walang tahi na texture. Ano ito?

Sa kasamaang palad, imposibleng i-stretch ang isang imahe sa html upang punan ang buong screen. Ang larawan ay ginagamit sa aktwal na laki. Kung maliit ang larawan, sakupin nito ang buong lugar, tulad ng sa screenshot sa ibaba. Upang mabatak ang imahe kailangan mong lumikha ng karagdagang dokumento ng CSS, kung wala ito ay hindi ito gagana.

Bagaman, mayroon kang pagkakataon na i-bypass ang system. Upang gawin ito, gamitin ang Photoshop at mga larawan hanggang sa lapad ng screen (1280x720). Bagaman sa kasong ito, kapag nag-scroll pababa, papalitan ng larawan ang isa pa.

Ang isang mas mahusay na opsyon kung ayaw mong gumamit ng css ay ang paggamit ng mga seamless na texture. Wala silang nakikitang joints. Para silang wallpaper o modernong tile sa disenyo. Pinapalitan ng isa ang isa at walang nakikitang mga kasukasuan.

Kung interesado ka sa kawalan ng mga legal na kahihinatnan para sa kanilang paggamit, pagkatapos ay inirerekumenda ko ang paghahanap sa website Pixabay.com .

HTML

Ngayon ay magtrabaho tayo sa code. Dapat kong tandaan kaagad na nagtatrabaho kami ngayon sa html, iyon ay, binabago namin ang imahe hindi para sa buong site, ngunit para lamang sa isang partikular na pahina kung saan isinusulat ang code. Kung interesado kang baguhin ang buong mapagkukunan, kailangan mong gamitin ang code css, ngunit higit pa tungkol diyan mamaya.

Kaya, maaari kang magtrabaho sa notepad, mas gusto ko ang NotePad++. Mas maginhawang magtrabaho dito: ang code ay nakumpleto para sa iyo, ang mga tag ay naka-highlight. Ang programa ay libre at tumitimbang ng humigit-kumulang 3 MB. Inirerekomenda ko ito, lalo na kung ikaw ay isang baguhan.

Kaya, sa tag katawan kailangan mong magdagdag ng katangian background at ipahiwatig ang isang link sa imahe kung saan kukunin ang larawan. Ito ang hitsura sa programa.

Maaari mo lamang buksan ang notepad at kopyahin ang code na ito. Sa mga quote, maglagay ng link sa larawang gusto mo.

<html > <ulo > <pamagat > Background-image</title> </ulo> <background ng katawan = "https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png"> </katawan> </html>

Gusto kong tandaan para sa mga nagsisimula, ito ang punto. Kung kukuha ka ng larawan mula sa Pixabay, kailangan mong i-paste ang link hindi sa pahinang may larawan, ngunit buksan ang larawan sa susunod na tab.

Kopyahin ang eksaktong URL na ito.

I-save ang dokumento. Huwag kalimutan na kung gumagamit ka ng notepad, kailangan mong gamitin ang extension .html . Pangalanan lang ang dokumento, halimbawa, back.html . Kung hindi, ito ay mai-save bilang tekstong dokumento at hindi lang mauunawaan ng browser kung ano ang kailangan nitong gawin.

Tapos na, ang pahina ay puno ng ibang kulay.

Kung gusto mong matuto nang higit pa tungkol sa html, iminumungkahi kong mag-download ka libreng kurso ni Evgeniy Popov . Mula rito ay matututo ka ng higit pang mga tag, kakayahan sa wika, sumubok ng ilang bagong pamamaraan at malalaman pa.

Hindi ko sasabihin na ang mga kurso ni Evgeniy Popov ay napakapopular. Maraming mga eksperto ang sumaway sa kanya, at kung nakatagpo ka ng mga ganoong pahayag, narito ang aking opinyon. Ang mga araling ito ay ibinibigay nang walang bayad at sa kabila nito ay ginagawa nila ang isang mahusay na trabaho sa kanilang pangunahing gawain - upang ipakita sa baguhan ang mga pangunahing kaalaman at dalhin siya hanggang sa kasalukuyan.

Kung paanong ang bawat manunulat ay may kanya-kanyang opinyon kung paano magsulat, ang mga programmer ay may kanya-kanyang istilo. Maaari mong gugulin ang iyong buong buhay sa pag-aaral kung paano lumikha ng mga website, ngunit kailangan mong magsimula sa isang lugar. Mula sa mga libro? Hindi ito. Oo, naglalaman ang mga ito ng mas maaasahang impormasyon, napapanahon na impormasyon, ngunit napakahirap nilang makabisado.

Hindi ka sumasang-ayon sa akin? Maaari akong mag-alok ng alternatibo. Aklat nina Elizabeth at Erica Freeman " Pag-aaral ng HTML, XHTML at CSS " Hindi isang napakaboring na bestseller at inilabas hindi pa nagtagal, noong 2016. Ang impormasyon ay hindi pa napapanahon.

CSS

Kung kailangan mong ulitin ang background sa lahat ng page ng iyong site, kailangan ang CSS. Siyempre, maaari mong tukuyin ang landas sa bawat oras, tulad ng sa nakaraang kabanata. Ngunit isipin kung sa paglipas ng panahon kailangan mong palitan ito: ang link ay nagiging lipas na o gusto mo lang baguhin ang disenyo. Pumunta sa bawat pahina at baguhin ang code? Hindi ito gagana sa ganoong paraan.

Tumutulong ang CSS na malutas ang problemang ito. Kailangan mong lumikha ng isang file na may css extension at ipasok ang sumusunod na code:

Pag-usapan natin ng kaunti ang tungkol sa code mismo. Sa panaklong, pagkatapos url maaari kang magpasok ng link sa isang larawan mula sa isang third-party na pinagmulan, o ang pangalan lamang ng dokumento kung ang larawan ay nasa parehong folder ng file na ito.

Para sa mga gustong malaman pa

Sa tulong sa css pwede kang magstretch larawan sa background, siguraduhing hindi ito mauulit, magdagdag ng GIF animation at marami pang iba.

Hindi mo maisusulat ang lahat sa isang artikulo. At hindi ako nagtakda ng ganoong gawain para sa aking sarili. Mayroong maraming mga subtleties, at kung nangangako silang sabihin sa iyo ang lahat sa isang artikulo, kung gayon ito ay walang iba kundi isang panlilinlang.

Gusto mo bang matutunan kung paano magsulat ng mga website nang tama? Inirerekomenda ko na matuto ka ng mga programming language. Maaari kong irekomenda ang kurso ni Andrey Bernatsky " HTML5 at CSS3 mula Zero hanggang Pro " Gustong gusto ko ang author na ito. Hindi ko kinuha ang partikular na kursong ito ilang taon na ang nakararaan may katulad, ngunit hindi gaanong moderno.

Napakahusay na kausap ng may-akda, lahat ay madali at naiintindihan. Ang highlight ng kursong ito ay hindi ka lang nag-aaral, gumagawa ka ng isang partikular na website kasama ang guro. Bilang resulta, makakakuha ka ng isang business card, isang blog at kahit isang online na tindahan. Napaka-cool. Maaari mong panoorin ang unang tatlong teoretikal na aralin sa HTML5 mula sa kursong ito dito mismo at ngayon.

Sa pamamagitan ng paraan, kasama ang kursong ito makakakuha ka ng 7 mga bonus: ang mga pangunahing kaalaman ng html at css ni Andrei Bernatsky, layout para sa mga nagsisimula, paglikha ng isang landing page sa isang gabi at marami pa. Bago ka gumawa ng seryosong pagsasanay, subukan ang libreng kurso " Magsanay ng HTML5 at CSS3 ».

Well, iyon lang talaga. Mag-subscribe sa newsletter para matuto pa. Sa lalong madaling panahon sasabihin ko sa iyo ang kaunti pa tungkol sa adaptive na layout, pataasin ang mga kita mula sa anumang blog at bigyan ka ng marami kapaki-pakinabang na mga tip tungkol sa pagpapasimple ng trabaho. Magkita-kita tayong muli at good luck sa iyong mga pagsusumikap.

12/27/14 56.3K

Ang anumang silid ay magiging mas maganda kung ang sahig nito ay natatakpan ng isang mamahaling Persian na karpet. Kaya bakit mas masama ang iyong website? Siguro oras na upang "takpan" ang sahig nito ng isang mamahaling, eleganteng handmade na alpombra. Tingnan natin kung paano gumawa ng background para sa isang website:

Background para sa site

Ito ay nangyayari na ang lumang disenyo ng website ay naging boring. At gusto ko ng bago at masarap. A bagong disenyo magiging ganyan kung lutuin mo ito gamit ang iyong sariling mga kamay.

Ngunit ang ganap na pagbabago sa buong disenyo ng isang mapagkukunan sa iyong sarili ay isang walang pasasalamat na gawain. At hindi lahat ng kamay ay wastong sinanay para sa gawaing ito. Samakatuwid, ang pinakamadaling paraan upang i-refresh ang isang lumang template ay ang baguhin ang kulay ng background ng mapagkukunan o ang larawan sa background nito.

Mayroong ilang mga paraan upang baguhin ang background sa isang website. Para dito, ginagamit ang mga kakayahan ng CSS o html. Ngunit marami sa mga katangian para sa pagtatrabaho sa background ay may parehong pangalan at paraan ng aplikasyon sa mga teknolohiyang ito sa web.

Mga pangunahing kaalaman sa pagtatrabaho sa mga background sa html

Maraming elemento ang maaaring gamitin bilang background:

• Kulay;
• Larawan sa background;
• Larawan ng texture.

Tingnan natin ang paggamit ng bawat isa sa kanila nang mas detalyado.

Upang itakda ang kulay ng background para sa isang site, gamitin ang background-color property ng style attribute. Iyon ay, upang itakda ang pangunahing kulay para sa isang web page, kailangan mong isulat ito sa loob ng tag . Halimbawa:

Background ng website #55D52B

Bilang karagdagan sa hexadecimal color code, sinusuportahan ang isang value sa keyword o RGB na format. Mga halimbawa:

Background ng website rgb(23,113,44)

Berde ang background ng website

Itakda ang kulay ng background gamit ang mga keyword ay may bilang ng mga limitasyon kumpara sa iba pang dalawang pamamaraan.

Sinusuportahan lamang ng HTML ang 16 na keyword upang magtakda ng mga kulay. Narito ang ilan sa kanila: puti, pula, asul, itim, dilaw at iba pa.

Samakatuwid, upang maitakda ang background para sa isang html site, mas mahusay na gumamit ng hexadecimal o RGB na format.

Bilang karagdagan sa pagpili ng kulay, ang iba pang mga pagpipilian sa pagpapasadya ay magagamit. Kung ang background-color property ay nakatakda sa transparent , ang background ng page ay magiging transparent. Ang value na ito ay itinalaga sa property na ito bilang default.

Ngayon tingnan natin ang mga kakayahan ng hypertext na wika para sa pagtatakda ng background na larawan para sa isang site. Magagawa ito gamit ang background-image property.

Tulad ng nakikita mo mula sa code, ang imahe ay naka-link sa pamamagitan ng url path na tinukoy sa mga panaklong. Ngunit hindi lahat ng mga larawan ay napakalaki na ang kanilang sukat ay pumupuno sa buong lugar ng screen. Tingnan natin kung paano ipapakita ang mas maliit na larawan.

Ipagpalagay na gumagawa tayo ng isang website tungkol sa tula, at kailangan nating gumamit ng imahe ng Pegasus bilang background. Ang kabayong may pakpak ay magiging personipikasyon ng kalayaan ng malikhaing pag-iisip ng makata!

Kailangan namin ang imahe na maipakita sa gitna ng screen nang isang beses. Ngunit, sa kasamaang-palad, hindi nauunawaan ng browser ang ating matayog na pagnanasa. At ito ay nagpapakita ng mas maliit na larawan para sa background ng site nang maraming beses hangga't kaya ng lugar ng screen:

Marahil ang apat na nakangiting kabayong may pakpak ay magiging sobrang inspirasyon para sa mga makata. Samakatuwid, ipinagbabawal namin ang pag-clone ng aming Pegasus. Ginagawa namin ito gamit ang background-repeat property. Mga posibleng halaga:

• repeat-x – ulitin ang larawan sa background nang pahalang;
• repeat-y – patayo;
• ulitin - sa parehong mga palakol;
• no-repeat – ipinagbabawal ang pag-uulit.

Kabilang sa mga nakalistang opsyon, interesado kami sa huli. Bago baguhin ang background ng site, ginagamit namin ito sa aming code:

Ngunit, siyempre, mas mabuti kung ang aming flyer ay matatagpuan sa gitna ng screen. Ang katangian ng background-position ay tiyak na inilaan para sa pagpoposisyon ng larawan sa background sa pahina. Maaari kang magtakda ng mga coordinate ng lokasyon sa maraming paraan:

• Keyword ( itaas, ibaba, gitna, kaliwa, kanan);
• Porsyento - nagsisimula ang pagbibilang mula sa kaliwang sulok sa itaas;
• Sa mga yunit ng pagsukat (pixels).

Gamitin natin ang pinakasimpleng opsyon sa pagsentro:

Nangyayari na kailangan mong ayusin ang posisyon ng isang larawan kapag nag-scroll. Samakatuwid, bago gumawa ng larawan bilang background ng site, gamitin ang espesyal na property background-attachment . Ang mga halagang tinatanggap nito ay:

• mag-scroll;


• naayos.

Kailangan natin ang huling halaga. Ngayon ang aming halimbawang code ay magiging ganito:

Background ng texture ng website

Sa unang halimbawa gumamit kami ng malaki at magandang tanawin ng disyerto para sa background. Ngunit kailangan mong magbayad nang buo para sa gayong kagandahan. Ang bigat ng imaheng ginawa sa mataas na kalidad, maaaring umabot ng ilang megabytes.

Ang volume na ito ay hindi sa anumang paraan makakaapekto sa bilis ng paglo-load ng pahina ng browser na may mataas na bilis ng koneksyon sa Internet. Pero paano naman mobile internet, na magtatagal bago mag-load ng ilang "metro"?