Hniezdisko: ako urobiť obrázok na pozadí html

Mnoho začínajúcich webové dizajnérmi, len aby sa ponoriť do podstaty tvorby miest, sa často pýtajú, ako sa to robí obraz html pozadia. A ak niektoré z nich môžu vysporiadať s týmto problémom, je to stále problém pri naťahovaní cez celú šírku obrazu na monitore. Zároveň by som chcel vidieť na webe sa zobrazujú zhodne na všetkých prehliadačoch, takže by mal spĺňať požiadavky cross-browser. Môžete nastaviť pozadie dvoma spôsobmi: pomocou HTML tagov a CSS štýlov. Každý sám vyberie tú najlepšiu možnosť. Samozrejme, CSS štýl je oveľa pohodlnejšie, pretože jeho kód je uložený v samostatnom súbore a nezaberá ďalšie reproduktory značky hlavnom závode, ale najskôr uvažujme jednoduchú metódu pre inštaláciu obrázok na pozadí webe.

Základné HTML tagy pre vytvorenie pozadia

Takže ideme na otázku, ako sa robí obrázok na pozadí vo formáte HTML na obrazovke. Za účelom pristane stránky, musíte pochopiť jednu pomerne dôležitý detail: to je dosť, len aby s prechodom pozadia alebo maľovať to plné farby, ale ak potrebujete vložiť obrázok na pozadí, nebude natiahnuť cez celú šírku monitora. Obraz bol pôvodne potreba vyzdvihnúť alebo si vytvoriť svoj vlastný dizajn s týmto rozšírením, v ktorom sa zobrazí stránka webu. Iba vtedy, keď obrázok na pozadí je pripravený, presuňte ju do priečinka s názvom «Obrázky». V ňom budeme ukladať všetky použité obrázky, animácie a ďalšie grafické súbory. Táto zložka musí byť umiestnený v koreňovom adresári so všetkými súbormi vo formáte HTML. Teraz môžete prejsť aj na kód. Existuje niekoľko možností pre písanie kódu, ktorým bude pozadie zmeniť obraz.

1. Napísať atribút tag.
2. Prostredníctvom CSS štýlu v kóde HTML.
3. Napísať CSS štýlov v samostatnom súbore.

Rovnako ako v HTML, aby obrázok na pozadí, môžete rozhodnúť, ale ja by som chcel povedať pár slov o tom, ako by bolo najoptimálnejšie. Prvá metóda je tým, že píše pomocou atribútu značky už dávno zastaraná. Druhý variant sa používa veľmi zriedka, pretože sa ukázalo, že mnoho z rovnakého kódu. Treťou možnosťou je najbežnejšie a efektívna. Tu sú príklady HTML tagy:

1. Prvá metóda záznamu pomocou atribútu značky (telo) v index.htm súbore. Skladuje sa v tejto forme: (telo pozadí = "folder_name / Nazvanie_kartinki.rasshirenie") (/ body). To znamená, že ak máme snímku s názvom «obrázok» a rozšírenie JPG a zložky sme s názvom «Images», potom položka HTML kód bude vyzerať takto: (body background = "Images / picture.jpg") ... (/ body) ,
2. Druhá metóda spočíva v nahrávaní CSS štýl, ale je to napísané v rovnakom súboru s názvom index.htm. (Body style = "background: url ( '../ Images / picture.jpg')").
3. Tretia metóda 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 = "http: // site / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ hlava). Súbor s názvom style.css štýl už písať: body {background: url (Images / picture.jpg,)}.

Rovnako ako v HTML, aby obrázok na pozadí, chápeme. Teraz je potrebné zistiť, ako roztiahnuť obraz cez celú šírku cez celú obrazovku.

Spôsoby, ako pretiahnuť obrázok na pozadí displeja na šírku okna

Zastupujeme naše obrazovky vo forme percenta. Ukazuje sa, že celá šírka a dĺžka obrazovky bude 100% x 100%. Musíme rozprestrieť obraz na tejto šírke. Pridať do obrazového súboru záznamu style.css linky, ktorá bude trvať obraz po celej šírke a dĺžke monitora. Ako je napísané v CSS štýle? Je to jednoduché!

telo

{

background: url (Images / picture.jpg,)

pozadia-size: 100%; / * Tento príspevok je vhodný pre väčšinu moderných prehliadačov * /

}

Tak sme zistili, ako vytvoriť obraz pozadia v HTML na obrazovke. K dispozícii je tiež spôsob záznamu v súbore index.htm. Aj keď týmto spôsobom a zastarané, ale pre začiatočníkov je nutné poznať a pochopiť. Tag (hlava) (štýl) div {background-size: kryt; } (/ Style) (/ hlava), to znamená, že záznam prideliť zvláštnu jednotku pre pozadie, ktoré sa položí cez celú šírku okna. Zvažovali sme dva spôsoby, ako sa robí HTML stránky pozadie obrazu, takže obraz je roztiahnutý na celú šírku displeja v niektorom z moderných prehliadačov.

Ako vytvoriť pevné zázemie

Ak sa rozhodnete použiť obrázok ako pozadie budúceho webového zdroja, potom stačí vedieť, ako ju pevne, takže to nie je natiahnuté v dĺžke a nie kazia estetický vzhľad. Jednoducho pomocou HTML kódu zaregistrovať malý prírastok. Musíte súbor style.css pridať vetu po pozadia: url (snímok / picture.jpg,) pevná; alebo miesto pridaný po bodkočiarkou samostatný riadok - funkcie: pevná. Tak bude vaša tapeta byť stanovená. Pri rolovaní obsahu na webe, uvidíte, že text linky sú pohyblivé, ale pozadie zostáva na svojom mieste. Takže ste sa naučili, ako sa to robí html obrázok na pozadí, v niekoľkými spôsobmi.

Práca s tabuľkami v HTML

Mnoho neskúsených webové vývojárov, tvárou v tvár s tabuľkami a blokov, často nechápu, ako sa robí html obraz pozadia tabuľky. Rovnako ako všetky tímy HTML štýlov a CSS, web programovací jazyk je pomerne jednoduchý. A riešením tohto problému je napísať pár riadkov kódu. už by ste mali vedieť, že písať tabuľku riadkov a stĺpcov, v uvedenom poradí, ako je vyznačené značkami (TR) a (td). Ak chcete na pozadí tabuľky vo forme obrázku, je nutné pridať do tagu (tabuľky), (TR) alebo (TD) jednoduché frázy s odkazom na referenčnom snímke: pozadí = obrazov URL. Pre názornosť uvádzame niekoľko príkladov.

Tabuľka s obrázkom miesto na pozadí: príklady HTML

Nakresliť 2x3 tabuľku a urobiť z neho obrázok na pozadí uložené v priečinku "Obrázky": (pozri tabuľku background = "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í obrazu.

Teraz čerpať rovnakej veľkosti doska 2x3, ale vložiť obrázok v stĺpcoch označených číslami 1, 4, 5 a 6. (pozri tabuľku) (TR) (td background = "Images / picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td pozadie = "Obrázky / 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í môžeme vidieť, že na pozadí sa zobrazí len v tých bunkách, v ktorých sme zaznamenali, a nie celú tabuľku.

site cross-browser kompatibilitu

Existuje taká vec ako webová kompatibilita zdroj cross-prehliadača. To znamená, že váš web je rovnako dobre zobraziť v rôznych typoch a verziách prehliadačov. Malo by to byť HTML kód a CSS štýlov prispôsobiť potrebné prehliadača. Okrem toho, v modernej dobe chytrých telefónov, veľa webových vývojárov sa snaží vytvárať weby a prispôsobené pre mobilné verziu a počítačovú vzhľad.