Gnijezde: kako napraviti pozadinsku sliku HTML

Mnogi početnici web dizajnera, samo kopati u suštinu stvaranja web stranice, često se pitam kako to učiniti HTML pozadinsku sliku. A ako su neki od njih mogu nositi s ovim problemom, to je još uvijek problem u vrijeme proteže cijelom širinom slike na monitoru. Istodobno bih želio vidjeti stranice prikazuju identično na svim preglednicima, tako da bi trebao ispuniti zahtjeve cross-preglednik. Možete postaviti pozadinu na dva načina: pomoću HTML oznake i CSS stilova. Svaki za sebe odabire najbolje opcije. Naravno, CSS stil je mnogo praktičniji, jer je kod pohranjen u posebnu datoteku i ne zauzimaju dodatni zvučnike na glavnoj stranici je oznaka, ali prvo razmotrimo jednostavan način za instaliranje sliku na pozadini stranice.

Osnovni HTML oznake za stvaranje pozadine

Dakle, idemo na pitanje o tome kako napraviti pozadinsku sliku u HTML-u na zaslonu. Kako izgledati lijepo mjesto, morate shvatiti jednu prilično važan detalj: to je dovoljno samo napraviti gradient pozadinu ili boja to jednobojnu, ali ako je potrebno umetnuti sliku pozadine, neće se protežu punu širinu zaslona. Slika je izvorno potrebno pokupiti ili napraviti svoj vlastiti dizajn sa ovim nastavkom, u kojem će se prikazati stranici web-mjesta. Tek kad je pozadina slika spremna, povucite u mapu pod nazivom «Slike». U njemu ćemo pohraniti sve rabljene slike, animacije i druge grafičke datoteke. Ova mapa bi se trebala nalaziti u root direktorij sa svim svojim HTML datoteke. Sada možete krenuti dalje i kako koda. Postoji nekoliko opcija za pisanje koda, kojom je pozadina će promijeniti sliku.

1. Napišite oznaku atribut.
2. Kroz CSS stila u HTML kodu.
3. Napišite CSS stilova u zasebnu datoteku.

Kao što je u HTML kako bi pozadinsku sliku, možete odlučiti, ali ja bih reći nekoliko riječi o tome kako bi bilo najoptimalnije. Prva metoda je pisanje preko oznake atributa je odavno zastarjela. Druga opcija se koristi vrlo rijetko, jer se ispostavilo da je puno isto koda. Treća mogućnost je najčešći i učinkovit. Ovdje su primjeri HTML oznake:

1. Prva metoda snimanja kroz oznake atributa (tijelo) u index.htm datoteku. Ona je pohranjena u ovom obliku: (body pozadini = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ tijelo). To jest, ako imamo sliku s naslovom «slika» i nastavkom JPG i mapu smo nazvali «Slike», zatim unos HTML-kod će izgledati ovako: (tijelo pozadina = „slike / slika.jpg”) ... (/ tijelo) ,
2. Druga metoda uključuje snimanje CSS stil, ali to je zapisano u istoj datoteci s nazivom index.htm. (Body style = "background: url ( '../ slike / slika.jpg')").
3. Treći način snimanja je napravljen u dvije datoteke. Dokument s nazivom index.htm oznaku (glave) je napisan tako redak: (glavu) (link rel = "stylesheet" type = "text / css" href = „http: // stranica / članak / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu „) (/ glavu). Datoteka naziva style.css stil već pisati: body {background: url (Slike / slika.jpg „)}.

Kao što je u HTML kako bi pozadinsku sliku, mi razumijemo. Sada morate shvatiti kako to rastezanje slike po širini cijelog zaslona.

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

Zastupnici smo našu zaslon u obliku postotka. Ispada da je cijela širina i dužina ekrana će biti 100% x 100%. Moramo rastezanje slike na ovoj širini. Dodaj u slikovnu datoteku za snimanje style.css liniju koja će se protežu slike preko cijele širine i dužine monitora. Kao što je pisano u CSS stil? To je jednostavno!

tijelo

{

Pozadina: url (Slike / slika.jpg „)

Pozadina veličine: 100%; / * Ovaj post je pogodan za većinu modernih preglednika * /

}

Tako smo shvatili kako napraviti pozadinu slike u HTML-u na zaslonu. Tu je i metoda snimanja u index.htm datoteku. Iako ova metoda i zastarjelo, ali za početnike je potrebno znati i razumjeti. Oznaka (glave) (način) div {background veličini: poklopac; } (/ Stil) (/ glava), ovaj album znači da ćemo izdvojiti posebnu jedinicu za pozadinu, koji će biti postavljen preko cijele širine prozora. Razmatrali smo dva načina, kako napraviti html stranice pozadinsku sliku, tako da je slika rastegnuta na cijelu širinu zaslona u bilo kojem od modernih preglednika.

Kako napraviti fiksnu pozadinu

Ako odlučite koristiti sliku kao pozadinu buduće web resurs, onda samo trebate znati kako bi ga fiksni, tako da se ne pruži u dužinu i nije pokvariti estetski izgled. Jednostavno pomoću HTML kôd registrirati mali dodatak. Morate podnijeti style.css dodati rečenicu nakon pozadini: url (slike / slika.jpg „) fiksna; ili umjesto dodan nakon zarez odvojeni linije - položaj: fiksni. Dakle, vaš pozadina će biti fiksne. Tijekom pomicanja sadržaja na stranici, vidjet ćete da je tekst linije se kreću, ali pozadina ostaje na mjestu. Dakle, što ste naučili kako napraviti html pozadinsku sliku, na više načina.

Rad s tablicama u HTML

Mnogi neiskusni web programeri, suočen sa stolovima i blokovima, često ne razumiju kako napraviti html slika pozadine tablice. Kao i svi timovi HTML i CSS stilova, web programski jezik je prilično jednostavan. A rješenje za ovaj problem je napisati par linija koda. Već ste trebali znati da je pisanje tablicu redaka i stupaca, odnosno, kao što je označeno oznakama (TR) i (TD). Da bi pozadinu stola u obliku slike, potrebno je dodati oznaku (stol), (tr) ili (TD) jednostavnu rečenicu s obzirom na referentnu sliku: pozadine = URL slike. Za jasnoću, dajemo nekoliko primjera.

Tablica sa slikom umjesto pozadini: HTML primjeri

Crtanje 2x3 stol i čine ga pozadinske slike pohranjene u mapu "Slike": (Tablica pozadini = "images / slika.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td), 5 (/ td) (td), 6 (/ td) (/ tr) (/ tablicu). Dakle, naš stol će biti izvučeni u pozadini slike.

Sada nacrtati iste veličine tanjur 2x3, no umetanje slike u stupcima brojevima 1, 4, 5 i 6. (tablica) (tr) (td pozadine = "slike / slika.jpg") 1 (/ td) (TD) 2 (/ td) (td), 3 (/ td) (/ tr) (tr) (td pozadina = "slike / slika.jpg") 4 (/ td) (td pozadina = "Slike / slika.jpg") 5 ( / td) (td pozadina = "Slike / slika.jpg 6") (/ td) (/ TR) (/ stol). Nakon gledanja možemo vidjeti da je u pozadini se pojavljuje samo u onim stanicama u kojima smo registrirani, a ne cijelu tablicu.

Cross-preglednik kompatibilnosti stranica

Postoji takva stvar kao cross-preglednik kompatibilnost web resurs. To znači da je vaš site je podjednako dobro prikazati na različite vrste i verzije preglednika. To bi trebao biti HTML kod i CSS stilova prilagoditi nužan preglednike. Osim toga, u moderno doba pametnih telefona, mnoge web programeri pokušavaju stvoriti stranice i prilagoditi za mobilne verzije i računala izgled.