Sit nesting: kif jagħmlu l-istampa isfond html

Ħafna disinjaturi web novizzi, biss li wieħed jidħol fis-essenza tal-ħolqien ta 'siti, wonder spiss kif jagħmlu isfond image html. U jekk xi wħud minnhom tista 'tittratta din il-problema, huwa għadu problema fiż-żmien ta' tiġbid-wisa 'kollha tal-immaġni fuq il-monitor. Fl-istess ħin nixtieq biex tara d-sit huma murija b'mod identiku fuq browsers, għalhekk għandu jissodisfa r-rekwiżiti ta 'cross-browser. Tista 'tissettja l-isfond f'żewġ modi: billi tuża HTML tags u stili CSS. Kull għalih innifsu jagħżel l-aħjar għażla. Naturalment, l-istil CSS huwa ħafna aktar konvenjenti, minħabba kodiċi tagħha hija maħżuna fil-fajl separat u ma jeħdux kelliema żejda fil tags tas-sit prinċipali imma ewwel ejjew jikkunsidraw metodu sempliċi għall-installazzjoni l-immaġni fuq l-isfond tas-sit.

HTML tags bażiċi biex joħolqu l-isfond

Allura, immorru l-kwistjoni ta 'kif jagħmlu l-immaġini isfond html fuq l-iskrin. Sabiex tfittex sit sbieħ, trid tifhem wieħed dettall pjuttost importanti: huwa biżżejjed biss biex jagħmlu l-isfond gradjent jew żebgħa kulur solidu, imma jekk għandek bżonn li daħħal l-immaġini isfond, mhux se tistira it-wisa 'kollha tal-monitor. L-immaġni kien oriġinarjament meħtieġ li jtellgħu jew tagħmel disinn tiegħek ma 'din l-estensjoni, fejn inti se display paġna tas-sit. Huwa biss meta l-immaġini isfond hija lesta, drag hija ġo folder imsejjaħ "Stampi». Fiha, aħna se taħżen l-immaġini użati, animazzjonijiet u fajls grafiċi oħra. Dan folder għandu jkun lokat fil-direttorju għerq bl-fajls kollha html tiegħek. Issa inti tista 'timxi fuq u għall-kodiċi. Hemm diversi għażliet għall-kodiċi kitba, li biha l-isfond se jibdlu l-istampa.

1. Ikteb attribut tikketta.
2. Permezz stil CSS fil-HTML code.
3. Ikteb stili CSS fil-fajl separat.

Bħal fil-HTML biex jagħmlu l-immaġini isfond, inti tiddeċiedi, imma nixtieq ngħid ftit kliem dwar kif ikun l-aktar ottimali. L-ewwel metodu huwa billi tikteb permezz ta 'attribut tikketta ilha skaduta. It-tieni għażla hija użata rarament ħafna, għaliex jirriżulta li ħafna ta 'l-istess kodiċi. It-tielet għażla hija l-aktar komuni u effettivi. Hawnhekk huma eżempji ta 'HTML tags:

1. L-ewwel metodu tar-reġistrazzjoni permezz attribut tikketta (korp) fil-fajl index.htm. Huwa maħżun f'din il-forma: (isfond korp = "folder_name / Nazvanie_kartinki.rasshirenie") (/ korp). Dan huwa, jekk ikollna stampa bit-titlu "Stampa" u estensjoni JPG, u l-folder aħna imsejjaħ «Stampi», allura l-entrata HTML kodiċi se teżamina bħal dan: (isfond korp = "Stampi / Picture.jpg") ... (/ korp) .
2. It-tieni metodu jinvolvi reġistrazzjoni ta 'stil CSS, iżda huwa miktub fl-istess fajl bl-index.htm isem. (Korp stil = "isfond: url (" ../ Stampi / Picture.jpg ")").
3. It-tielet metodu ta 'reġistrazzjoni hija magħmula f'żewġ fajlijiet. Id-dokument bl-tikketta l-isem index.htm (ras) hija miktuba tali linja: (ras) (rabta rel = tip "stylesheet" = "test / css" href = "http: // sit / artikolu / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ ras). Fajl imsejħa stil style.css diġà jikteb: korp {isfond: url (Stampi / Picture.jpg ")}.

Bħal fil-HTML biex jagħmlu l-immaġini isfond, nifhmu. Issa għandek bżonn biex insemmu kif biex tistira it-immaġni madwar l-wisa 'tal-iskrin kollu.

Modi biex tistira l-immaġini isfond għall-wisa 'tat-tieqa

Aħna jirrappreżentaw iskrin tagħna fil-forma ta 'persentaġġ. Jirriżulta li l-wisa 'kollu u t-tul tal-iskrin se tkun ta' 100% × 100%. Għandna bżonn biex tistira it-immaġini biex din wisa '. Żid mal-immaġni fajl linja reġistrazzjoni style.css li se stretch l-immaġni fuq l-wisa 'kollha u t-tul tal-monitor. Kif huwa miktub fl-istil CSS? Huwa sempliċi!

korp

{

isfond: url (Stampi / Picture.jpg ")

isfond ta 'daqs: 100%; / * Dan il-post huwa adattat għal ħafna browsers moderni * /

}

Allura aħna dehret kif jagħmlu stampa isfond html fuq l-iskrin. Hemm ukoll metodu ta 'reġistrazzjoni fil-fajl index.htm. Għalkemm dan il-metodu u skaduti, iżda għall jibdew huwa meħtieġ li jafu u jifhmu. Il-lametta (ras) (stil) div {isfond-daqs: kopertura; } (/ Style) (/ ras), dan ir-rekord ifisser li aħna jallokaw unità speċjali għall-isfond, li se jitqiegħed fuq il-wisa 'kollha tat-tieqa. Aħna kkunsidrati żewġ modi, kif jagħmlu sit html stampa isfond, sabiex l-immaġini huwa miġbud għal-wisa 'kollha tal-iskrin fi kwalunkwe mill-browsers moderni.

Kif tagħmel sfond fiss

Jekk inti tiddeċiedi li tuża stampa bħala l-isfond tar-riżorsa web futur, allura inti biss jeħtieġ li tkun taf kif jagħmlu fiss, b'tali mod li mhuwiex stirata fid-tul u ma jħassru l-apparenza estetika. Sempliċiment bl-użu HTML code li jirreġistraw żieda żgħira. Ikollok bżonn għall-fajl style.css li żżid frażi wara sfond: url (Stampi / Picture.jpg ") iffissata; jew minflok miżjuda wara l virgola linja separata - il-pożizzjoni: fissa. Għalhekk, wallpaper tiegħek se tiġi ffissata. Matul scrolling kontenut fuq is-sit, se tara dak it-test linji huma jiċċaqilqu, iżda l-isfond tibqa 'f'postha. Allura inti tgħallimt kif tagħmel isfond image html, f'diversi modi.

Ħidma ma Tabelli HTML

Ħafna iżviluppaturi tal-web esperjenza, iħabbtu wiċċhom ma 'tabelli u blokki, spiss ma jifhmux kif jagħmlu tabella isfond image html. Bħal kull timijiet HTML stili u CSS, il-lingwa programmazzjoni web hija pjuttost sempliċi. U s-soluzzjoni għal din il-problema huwa li jiktbu par ta 'linji ta' kodiċi. Għandek diġà jafu li l-kitba tabella ta 'ringieli u kolonni, rispettivament, kif indikat mill-tags (tr) u (td). Biex tagħmel l-isfond tat-tabella fil-forma ta 'immaġni, huwa meħtieġ li żżid mal-tikketta (tabella), (tr) jew (td) frażi sempliċi b'referenza għall-immaġni ta' referenza: l-isfond = stampi URL. Għaċ-ċarezza, aħna nagħtu ftit eżempji.

Tabella bi stampa minflok l-isfond: eżempji HTML

Jiġbed tabella 2X3 u jagħmilha l-isfond image maħżuna fil-folder "Stampi": (isfond tabella = "Stampi / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabella). Allura mejda tagħna se jsir fl-isfond tal-istampa.

Issa jiġbed l-istess daqsijiet pjanċa ta 2X3, iżda daħħal stampa fil-kolonni numerati 1, 4, 5 u 6. (tabella) (tr) (isfond td = "Stampi / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (isfond td = "Stampi / Picture.jpg") 4 (/ td) (isfond td = "Stampi / Picture.jpg") 5 ( / td) (isfond td = "Stampi / Picture.jpg") 6 (/ td) (/ tr) (/ tabella). Wara li jaraw nistgħu naraw li l-isfond jidher biss f'dawk iċ-ċelluli li aħna reġistrati, u mhux il-mejda kollu.

sit cross-browser kompatibilità

Hemm tali ħaġa bħala riżors web cross-browser kompatibilità. Dan ifisser li sit tiegħek huwa ugwalment murija sew fit-tipi u verżjonijiet ta 'browsers differenti. Għandu jkun kodiċi HTML u CSS stili biex jippersonalizzaw xi browsers meħtieġa. Barra minn hekk, fl-era moderna ta 'smart phones, l-iżviluppaturi web ħafna qed jippruvaw joħolqu siti u adattati għall-verżjoni mobbli u ħarsa kompjuter.