Gniježđenje site: kako napraviti pozadinsku sliku html

Mnogi početnici web dizajneri, samo da se udubi u suštinu stvaranja lokacijama, često se pitam kako to učiniti html pozadinsku sliku. A ako neki od njih može da se bavi ovim problemom, to je i dalje problem u vrijeme proteže cijelom širinom slike na monitoru. U isto vrijeme želim da vidim stranice su identično prikazani na svim preglednicima, tako da bi trebao ispuniti zahtjeve cross-browser. Možete postaviti pozadinu na dva načina: pomoću HTML i CSS stilova. Svaka za sebe bira najbolja opcija. Naravno, CSS stil je mnogo jednostavnije, jer je kod se čuva u posebnoj datoteci i ne zauzima dodatni govornika tagove glavnom sajtu, ali prvo razmotrimo jednostavan način za instaliranje sliku na pozadinu stranice.

Osnovni HTML oznake za stvaranje pozadine

Dakle, idemo na pitanje o tome kako napraviti pozadinu slike u HTML na ekranu. Kako izgledati lijepo stranice, morate razumjeti, a važan detalj: to je dovoljno da se napravi gradijenta pozadinu ili boje to solidnu boju, ali ako vam treba da ubacite sliku u pozadini, to neće rastegnuti punoj širini monitora. Slika je prvobitno potrebno da pokupi ili napraviti svoj vlastiti dizajn sa ovom ekstenzijom, u kojoj će se prikazati stranu sajta. Tek kada je pozadinska slika je spremna, povucite ga u folder pod nazivom "Slike». U njemu ćemo sačuvati sve polovne slike, animacije i druge grafičke datoteke. Ovaj folder treba da se nalaze u root direktorij sa svim svojim HTML datoteke. Sada možete preći na i kod. Postoji nekoliko opcija za pisanje koda, kojim će se u pozadini promijeniti sliku.

1. Napišite tag atribut.
2. Kroz CSS stila u HTML koda.
3. Napišite CSS stilova u posebnoj datoteci.

Kao što je u HTML kako bi sliku u pozadini, možete odlučiti, ali ja bih da kažem nekoliko riječi o tome kako bi bilo najoptimalnije. Prva metoda je pišući kroz citat atribut je odavno zastarjela. Druga opcija se koristi vrlo rijetko, jer se ispostavilo da je mnogo isti kod. Treća opcija je najčešći i efikasna. Evo primjera HTML tags:

1. Prvi način snimanja kroz citat atribut (tijelo) u index.htm datoteku. Čuva se u ovom obliku: (background tijelo = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ tijelo). To jest, ako imamo sliku sa nazivom «sliku» i proširenje JPG i folder koji smo nazvali «Slike», zatim unos HTML-kod će izgledati ovako: (body background = "Slike / Picture.jpg") ... (/ tijelo) .
2. Druga metoda uključuje snimanje CSS stil, ali to je napisano u istom fajlu sa imenom index.htm. (Tijelo style = "background: url ( '../ slike / Picture.jpg')").
3. Treći način snimanja je napravljen u dvije datoteke. U dokumentu pod nazivom index.html tag (glava) je napisana takva linija: (glava) (link rel = tipa "stila" = "text / css" href = "http: // site / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ glava). Datoteku pod nazivom stil style.css već pišu: body {background: url (Images / Picture.jpg ')}.

Kao što je u HTML kako bi sliku u pozadini, mi razumijemo. Sada treba da smislim kako da se protežu sliku po cijeloj širini cijelog ekrana.

Načina da se protežu pozadinsku sliku na širinu prozora

Mi predstavljamo našim ekranima u obliku postotka. Ispostavilo se da je cijela širina i dužina ekrana će biti 100% × 100%. Moramo da se protežu sliku na ovu širinu. Dodaj u datoteke slike za snimanje style.css liniju koja će se protezati sliku po cijeloj širini i dužini monitora. Kao što je napisano u CSS stil? To je jednostavno!

tijelo

{

background: url (Images / Picture.jpg ')

background-size: 100%; / * Ovaj post je pogodan za većinu modernih pretraživača * /

}

Pa smo smislili kako napraviti neku sliku kao pozadinu u html na ekranu. Tu je i način snimanja u index.htm datoteku. Iako je ova metoda i zastarjeli, ali za početnike je potrebno znati i razumjeti. Oznaku (glava) (stil) Div {background-size: poklopac; } (/ Style) (/ glava), ovaj album znači da smo izdvojiti posebne jedinice za pozadinu, koji će biti postavljeni po cijeloj širini prozora. Mi smo u obzir dva načina, kako napraviti neku sliku kao pozadinu HTML stranice, tako da je slika rastegnut na cijelom širinom ekrana u bilo kojoj od modernim pretraživačima.

Kako napraviti fiksni pozadini

Ako odlučite koristiti sliku kao pozadinu buduće web resurs, onda samo treba znati kako da se popravi, tako da ne bude pod pritiskom u dužinu i nije pokvario estetski izgled. Jednostavno pomoću HTML kod za registraciju mali dodatak. Potrebno je da podnese style.css da dodate izraz nakon background: url (Images / Picture.jpg ') fiksni; ili umjesto dodao nakon zarez posebnu liniju - položaj: fiksna. Dakle, pozadine će biti fiksna. Tokom scrolling sadržaj na sajtu, vidjet ćete da tekst linije se kreću, ali u pozadini je i dalje na snazi. Tako ste naučili kako to učiniti html pozadinsku sliku, na više načina.

Rad sa tabelama u HTML

Mnogi neiskusni web programere, suočeni sa stolovima i blokovima, često ne razumiju kako napraviti html sliku pozadine stola. Kao i svi timovi HTML i CSS stilova, web programski jezik je prilično jednostavan. I rješenje za ovaj problem je da se napiše par linija koda. Trebalo bi već znate da je pisanje sto redaka i stupaca, odnosno, kao što je navedeno od strane tagova (tr) i (td). Da bi se u pozadini stola u obliku slika, potrebno je dodati oznaku (sto), (tr) ili (td) jednostavan izraz u odnosu na referentne slike: background = URL slike. Radi jasnoće, dajemo nekoliko primjera.

Stol sa slikom umjesto pozadini: HTML primjeri

Nacrtajte 2x3 stolom i čine ga pozadinsku sliku pohranjene u folderu "Slike" (sto background = "Slike / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ table). Dakle, naš stol će se izvući u pozadini slike.

Skrenem istim mjerama ploču 2x3, ali ubacite sliku u kolonama brojevima 1, 4, 5 i 6. (tabela) (tr) (td background = "Slike / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "Slike / Picture.jpg") 4 (/ td) (td background = "Slike / Picture.jpg") 5 ( / td) (td background = "Slike / Picture.jpg") 6 (/ td) (/ tr) (/ table). Nakon gledanja možemo vidjeti da je pozadina pojavljuje samo u onim ćelijama u kojima smo registrovali, a ne ceo sto.

Cross-browser kompatibilnost stranice

Postoji takva stvar kao što je cross-browser kompatibilnost web resursa. To znači da je vaš site je jednako dobro prikazan na različite vrste i verzije pretraživača. To bi trebao biti HTML kod i CSS stilova prilagoditi neophodan pretraživača. Osim toga, u moderno doba pametnih telefona, mnoge web programeri pokušavaju stvoriti stranice i prilagođen za mobilnu verziju i kompjuter izgled.