mnoho nových usporiadanie, len dostať do srdca vytváranie webov, často pýtajú, ako sa html, aby obrázok na pozadí.A ak niektoré z nich môžu vysporiadať s týmto problémom, stále máte problémy počas úseku celej šírke obrazu na monitore.Zároveň by som chcel vidieť na stránky sa zobrazujú vo všetkých prehliadačoch, takže musí byť v súlade s požiadavkami krossbrauzernosti.Môžete nastaviť pozadie dvoma spôsobmi: pomocou HTML tagy a CSS štýlov.Každý pre seba vyberie najlepšiu možnosť.Samozrejme, CSS štýl je oveľa pohodlnejšie, pretože kód je uložený v samostatnom súbore a nezaberá ďalšie reproduktory v hlavných značiek na mieste, ale najprv zvážiť jednoduchý spôsob nastavenia obrázka na pozadí na mieste.
základné HTML tagy vytvoriť zázemie
Takže, choďte na otázku, ako sa robí obrázok na pozadí html na obrazovke.Aby sa sluší stránky, musíte pochopiť, pomerne dôležitý detail: to je dosť, len aby s prechodom pozadie alebo plnú farbu ju maľovať, ale ak chcete vložiť obrázok do pozadia, nebude natiahnuť celú šírku monitora.Obraz bol pôvodne potreba vyzdvihnúť, alebo si vytvoriť svoj vlastný dizajn s týmto rozšírením, v ktorom sa zobrazia stránky.Iba v prípade, obrázok na pozadí je pripravený, presunúť ju do priečinka s názvom "Obrázky».V ňom budeme ukladať všetky použité obrázky, animácie a ďalšie obrazové súbory.Táto zložka by mala byť v koreňovom adresári súboru s všetky vaše html.Teraz môžete prejsť na kód.Existuje niekoľko možností pre záznam kódu, ktorý vzor sa bude meniť obraz.
- Write atribút tag.
- pomocou CSS štýlu v kóde HTML.
- Write CSS štýl v samostatnom súbore.
Ako HTML urobiť obrázok na pozadí, pre vás sa rozhodnúť, ale ja by som rád povedal pár slov o tom, ako by to bolo najoptimálnejšie.Prvá metóda je zápisom prostredníctvom tag je už dlho zastaraná.Druhou možnosťou je použitá len veľmi zriedka, pretože sa ukazuje, že veľa rovnakého kódu.Treťou možnosťou je najbežnejší a efektívne.Tu je príklad značiek HTML:
- Prvá metóda záznamu pomocou tagu (body) v súbore index.htm.To je napísané v tejto podobe: (telo pozadí = "Nazvanie_papki / Nazvanie_kartinki.rasshirenie") (/ body).To znamená, že ak budeme mať obrázok s názvom «obrázok» a rozšírenie JPG, a zložka my s názvom «Images», potom sa záznam HTML kóde by vyzerať takto: (telo pozadí = "Obrázky / Picture.jpg") ... (/ body),
- Druhá metóda spočíva nahrávanie CSS štýl, ale je napísaný v rovnakom súboru s názvom index.htm.(telo style = "background: url (" ../ images / Picture.jpg ') ").
- A tretí spôsob záznamu sa vyrába v dvoch súboroch.Dokument s názvom index.htm tagu (hlava) je napísaná tak riadok: (hlava) (link rel = "stylesheet" type = "text / css" href = "Put_k CSS_faylu") (/ hlava).Súbor štýl pomenovaný style.css už napísať: body {background: url (Obrázky / Picture.jpg ')}.
Ako HTML urobiť obrázok na pozadí, diskutovali sme.Teraz je potrebné zistiť, ako roztiahnuť obraz cez celú šírku celej obrazovky.
spôsoby rozťahovanie tapety na šírke okna
predstaviť naše obrazovky v percentách forme.Ukazuje sa, že po celej dĺžke a šírke obrazovky bude 100% x 100%.Musíme rozprestrenie obrázku na tejto šírke.Pridať do nahrávať snímky do súboru riadku style.css ktorá bude trvať obraz na celej šírke a dĺžke monitora.Ako je napísané v CSS štýle?Je to jednoduché!
telo
{
background: url (images / Picture.jpg ")
background-size: 100%;/ * Tento príspevok je vhodný pre väčšinu moderných prehliadačov * /
}
Tak sme prišli na to, ako urobiť obrázok pozadia do html na obrazovke.K dispozícii je metóda záznamu v súbore index.htm.Hoci tejto metódy a zastarané, ale pre začiatočníkov je nutné poznať a pochopiť.Tag (hlava) (štýl) div {background-size: kryt;} (/ Style) (/ head), to znamená, že záznam prideliť špeciálnu jednotku pre pozadie, ktorý bude umiestnený po celej šírke okna.Zvažovali sme dve možnosti, ako tomu, aby sa na pozadí obrazu html, obraz sa natiahne na celú šírku displeja v niektorom z moderných prehliadačov.
Ako pevné zázemie
Ak sa rozhodnete použiť obrázok ako pozadie budúcnosť webového zdroja, potom stačí vedieť, ako urobiť to opraviť, takže to nie je natiahnuť na dĺžku a nepokazil estetický vzhľad.Jednoducho pomocou HTML kódu zaregistrovať malým prídavkom.Musíte súboru style.css pridať jednu vetu po pozadia: url (images / Picture.jpg ") pevná;alebo namiesto toho vkladá bodkočiarkou samostatný riadok s - funkcie: pevná.Tak, vaše tapeta opraviť.Pri posúvaní obsahu stránok, uvidíte, že textové riadky sa pohybujú, ale pozadie zostáva na mieste.Takže ste sa naučili, ako sa html, aby obrázok na pozadí, niekoľkými spôsobmi.
pracovať s tabuľkami v HTML
veľa neskúsených webových vývojárov, tvárou v tvár s tabuľkami a jednotkami často nechápu, ako sa html, aby obrázok na pozadí tabuľky.Rovnako ako všetky tímy HTML a CSS štýlov, jazyk programovanie webu je veľmi jednoduchá.A riešením tohto problému je napísať niekoľko riadkov kódu.Uz by si mal vedieť, že písanie tabuľku riadkov a stĺpcov, respektíve, ako vyznačené značkami (TR) a (TD).Aby pozadie tabuľky vo forme obrázkov, je nevyhnutné pridať k tagu (tabuľky), (t) alebo (TD) jednoduchým frázy s odkazom na obrázku: pozadí = URL obrázku.Pre názornosť uvádzame niekoľko príkladov.
stoly sa obrázok na pozadí, miesto: príklady HTML
Nakreslite 2x3 tabuľku a urobiť z neho obrázok na pozadí uložené v priečinku "Obrázky": (tabuľka pozadie = "images / Picture.jpg") (tr) (td)1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabuľka).Takže naša tabuľka bude vypracovaný na pozadí obrázku.
Teraz nakreslite rovnaký doska veľkosti 2x3, ale vložiť obrázok v rade stĺpci 1, 4, 5 a 6. (tabuľka) (TR) (td pozadie = "Images / Picture.jpg") 1 (/ td)(td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td background = "images / Picture.jpg") 4 (/ td) (td pozadie = "Obrázky / Picture.jpg") 5 (/ td) (td background =" Obrázky / Picture.jpg ") 6 (/ td) (/ tr) (/ tabuľka).Po zhliadnutí je vidieť, že na pozadí sa zobrazí len v tých bunkách, v ktorom sme sa registrovali, ale nie celú tabuľku.
Cross-browser site
Existuje taká vec ako cross-browser kompatibility webového zdroja.To znamená, že stránky na webe sa rovnako dobre zobraziť v rôznych typoch a verziách prehliadačov.Malo by to byť HTML kód a CSS prispôsobiť štýl požadované prehliadačov.Okrem toho, v modernej dobe chytrých telefónov, veľa webových vývojárov sa snaží vytvárať stránky, ktoré sú prispôsobené aj mobilné verzie počítača a vzhľad.
