Nestoloko: kiel fari la fono bildo html

Multaj novulo retejo diseñadores, nur por enprofundiĝi en la esenco de la kreo de lokoj, ofte scivolas kiel fari html fono bildo. Se iuj el ili povas trakti tiun problemon, ĝi estas ankoraŭ problemo en la momento de tirante la tuta larĝo de la bildo sur la ekrano. Samtempe mi ŝatus vidi la retejo estas montrata idente en ĉiuj retumiloj, do ĝi devus plenumi la postulojn de transversa retumilo. Vi povas agordi la fonon dumaniere: uzante HTML etikedoj kaj CSS stiloj. Ĉiu por si elektas la plej bona elekto. Kompreneble, CSS stilo estas multe pli oportuna, ĉar lia kodo estas stokita en aparta dosiero kaj ne prenas ekstrajn parolantoj en la ĉefa retejo etikedoj, sed unue ni konsideru simpla metodo por instali la bildo sur la fono de la retejo.

Bazaj HTML etikedoj por krei la fono

Do, ni iru al la demando de kiel fari la fono bildo html sur la ekrano. Por aspektas bela ejo, Vi devas kompreni unu prefere grava detalo; suficxas nur por fari gradiento fono aŭ pentri ŝin solida koloro, sed se vi bezonas enmeti la fono bildo, ĝi ne tiri la plena larĝo de la monitoro. La bildo estis origine necese kolekti aŭ fari vian propran dezajnon kun ĉi tiu etendo, en kiu vi vidigas paĝo de la retejo. Nur kiam la fono bildo estas preta, treni ĝin en dosierujo nomita «Bildoj». En ĝi, ni stoki ĉiujn uzis bildojn, kuraĝigoj kaj aliaj grafikaj dosieroj. Tiu dosierujo devas esti lokita en la radika dosierujo kun ĉiuj viaj html dosierojn. Nun vi povas movi sur kaj al la kodo. Estas pluraj ebloj por skribi kodo, per kiu la fono ŝanĝos la bildon.

1. Skribi etikedo atributo.
2. Tra CSS stilo en la HTML-kodo.
3. Skribi CSS stiloj en aparta dosiero.

Kiel en la HTML-fari la fonon bildo, vi decidas, sed mi ŝatus diri kelkajn vortojn pri kiel ĝi estus la plej optimuma. La unua metodo estas skribante tra etikedo eco longe estis malaktuala. La dua eblo estas uzata tre malofte, ĉar ĝi rezultas ke multaj de la sama kodo. Tria eblo estas la plej ofta kaj efika. Jen ekzemploj de HTML etikedoj:

1. La unua registrado metodo per etikedo eco (korpo) en enhavantan index.htm dosiero. Ĝi estas stokita en ĉi tiu formo: (korpo fono = "folder_name / Nazvanie_kartinki.rasshirenie") (/ korpo). Tio estas, se ni havas bildon kun la titolo «Bildo» kaj sufikso JPG kaj la dosierujo ni nomis «Bildoj», do la HTML-kodon eniro aspektos tiel ĉi: (korpo fono = "Bildoj / Picture.jpg") ... (/ korpo) .
2. La dua metodo implikas gravuri CSS stilo, sed ĝi estas skribita en la sama dosiero kun la nomo enhavantan index.htm. (Korpo stilo = "background: url ( '../ bildoj / Picture.jpg')").
3. La tria metodo de registrado estas farita en du dosierojn. La dokumento kun la nomo enhavantan index.htm etikedo (kapo) estas skribita kiel linio: (kapo) (ligilo rel = "stilfolio" tipo = "text / css" href = "http: // ejo / artikolo / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ kapo). Dosiero nomita style.css stilo jam skribas: korpo {background: url (Bildoj / Picture.jpg ')}.

Kiel en la HTML-fari la fono bildo, ni komprenas. Nun vi devas eltrovi kiel tiri la bildo trans la larĝo de la tuta ekrano.

Vojoj de tiri la fono bildon por la larĝeco de la fenestro

Ni reprezentas nian ekrano en la formo de procento. Ĝi rezultas ke la tuta larĝo kaj longo de la ekrano estos 100% × 100%. Ni devas tiri la bildon por tiu larĝa. Aldoni al la bildo dosiero registradon style.css linio kiu etendos la bildo super la tuta larĝo kaj longo de la monitoro. Kiel estas skribite en CSS stilo? Estas simpla!

korpo

{

fono: url (Bildoj / Picture.jpg ')

fono-grandeco: 100%; / * Ĉi tiu post estas taŭga por plej modernaj foliumiloj * /

}

Do ni eltrovis kiel fari bildon fono en html sur la ekrano. Ankaŭ ekzistas metodo de registrado en la enhavantan index.htm dosiero. Kvankam tiu metodo kaj malmoderna, sed por komencantoj necesas scii kaj kompreni. La etikedo (kapo) (stilo) div {fono-grandeco: kovrilo; } (/ Style) (/ kapo), tiu disko signifas, ke ni rezervu speciala unuo por la fono, kiu estos poziciigita super la tuta larĝo de la fenestro. Ni konsideras du manieroj, kiel fari fonon bildo html ejo, tiel ke la bildo estas etendita al la tuta larĝa de la ekrano en ajna de la modernaj foliumiloj.

Kiel fari fiksa fono

Se vi decidas uzi bildon kiel la fono de la estonteco ttt rimedo, tiam vi nur bezonas scii kiel fari gxin fiksita, tiel ke ĝi ne etendis en longo kaj ne difektas la estetika aspekto. Simple uzante HTML kodo registri malgranda aldono. Vi devas dosiero style.css aldoni frazon post fono: url (Bildoj / Picture.jpg ') fiksita; aŭ anstataŭ aldonita post la punktokomo aparta linio - pozicio: riparita. Tiel, via fonbildo estos fiksita. Dum scrolling enhavo en la retejo, vi vidos, ke teksto linioj moviĝas, sed la fono restas en loko. Do vi lernis kiel fari html fono bildo, en pluraj manieroj.

Laborante kun Tabeloj en HTML

Multaj sensperta ttt programistoj, alfrontis kun tabloj kaj blokoj, ofte ne komprenas kiel fari html bildo fono tablo. Kiel ĉiuj teamoj HTML kaj CSS stiloj, la TTT programlingvo estas sufiĉe simpla. Kaj la solvo al ĉi tiu problemo estas skribi paron de linioj de kodo. Vi devus jam scii, ke skribi tabelon de vicoj kaj kolumnoj, respektive, kiel indikita de la etikedoj (tr) kaj (td). Por la fono de la tablo en la formo de bildo, necesas aldoni la etikedon (tablo), (tr) aŭ (td) simpla frazo kun referenco al la referenco bildo: fono = URL bildoj. Por klareco, ni donas kelkajn ekzemplojn.

Tablo kun bildo anstataŭ la fono: HTML ekzemploj

Desegnu 2x3 tablo kaj fari ĝin la fonon bildo stokitaj en la dosierujo "Bildoj": (tablo fono = "Bildoj / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tablo). Do nia tablo estos tiritaj en la fono de la bildo.

Nun desegni la sama telero grandecoj de 2x3, sed enmeti foton en la kolumnoj numeritaj 1, 4, 5 kaj 6. (tablo) (tr) (td fono = "Bildoj / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td fono = "Bildoj / Picture.jpg") 4 (/ td) (td fono = "Bildoj / Picture.jpg") 5 ( / td) (td fono = "Bildoj / Picture.jpg") 6 (/ td) (/ tr) (/ tablo). Post rigardante oni povas vidi, ke la fono aperas nur en tiuj ĉeloj, en kiu ni registras, kaj ne la tuta tablo.

Kruco retumilo kongruo retejon

Ekzistas tia afero kiel kruco-retumilo kongruo ttt rimedo. Tio signifas, ke via retejo estas egale bone montrita en malsamaj tipoj kaj versioj de retumiloj. Ĝi devus esti HTML kodo kaj CSS stiloj personecigi necesa retumiloj. Krome, en la moderna epoko de lertaj telefonoj, multaj desarrolladores retejo provas krei ejoj kaj adaptita por porteblaj versio kaj komputila rigardon.