Rozložení webových stránek: jak vytvořit obrázek v pozadí v html

Mnoho začátečníků, kteří chápou podstatu tvorby webových stránek, často zajímá, jak v html vytváří pozadí obrázek. A pokud někteří lidé porozumí tomuto problému, stále přetrvávají problémy při protahování obrazu na celou šířku monitoru. V tomto případě bych chtěl, aby byl web zobrazen stejným způsobem ve všech prohlížečích, takže by měl být splněn požadavek na kompatibilitu mezi prohlížeči. Pozadí můžete nastavit dvěma způsoby: pomocí HTML tagy

Základní značky HTML pro vytváření pozadí

Takže pojďme se podívat na otázku, jak vytvořit obrázek na pozadí v html na celé obrazovce. Za účelem sluší stránky, musíte pochopit jednu poměrně důležitý detail: to je dost, jen aby s přechodem pozadí nebo malovat to plné barvy, ale pokud potřebujete vložit obrázek na pozadí, nebude natáhnout přes celou šířku monitoru. Obraz by měl být zpočátku vybrán nebo samostatně proveden podle návrhu s takovým rozšířením, ve kterém bude zobrazena stránka stránky. Teprve poté, co je obrázek na pozadí připraven, převedeme jej do složky s názvem "Obrázky". V něm uložíme všechny použité obrázky, animace a další grafické soubory. Tato složka by měla být v kořenovém adresáři se všemi html soubory. Nyní můžete jít na kód. Existuje několik možností pro psaní kódu, kterým se pozadí změní na obrázek.

1. Napište atribut tagu.
2. Prostřednictvím stylu CSS v kódu HTML.
3. Napište styl CSS do samostatného souboru.

Stejně jako v HTML, abyste se obrátili na obrázek, rozhodnete se, ale rád bych řekl několik slov o tom, jak by to bylo optimální. První metoda zápisem pomocí atributu tagu je už dávno zastaralá. Druhá možnost se používá ve velmi ojedinělých případech, jen proto, že získáte hodně stejného kódu. A třetí možnost je nejčastější a nejúčinnější. Zde jsou příklady značky HTML:

1. První způsob zápisu pomocí atributu body v souboru index.htm. Je napsán v této podobě: (body background = "název_souboru / název_popisu.extension") (/ body). To znamená, že pokud máme obrázek s názvem "Obraz" a rozšíření JPG a pojmenovali jsme složku jako "Obrázky", bude HTML kód vypadat takto: (body background = "Images / Picture.jpg") hellip- ).
2. Druhý způsob psaní ovlivňuje styl CSS, ale je napsán ve stejném souboru s názvem index.htm. (tělesný styl = "background: url (`../ Images / Picture.jpg`)").
3. A třetí způsob nahrávání se provádí ve dvou souborech. Dokument s názvem index.htm tagu (hlava) je zaznamenána je řada: (head) (link rel = "stylesheet" type = "text / css" href = "Put_k CSS_faylu") (/ head). A ve stylu souboru s názvem style.css již píšeme: body {background: url (Images / Picture.jpg `)}.

Stejně jako v HTML, abychom vytvořili obrázek na pozadí, jsme rozebráni. Nyní musíte pochopit, jak natáhnout obrázek po celé šířce celé obrazovky.

Způsoby roztažení obrázku na pozadí šířky okna

Představme si naši obrazovku jako procento. Ukazuje se, že celá šířka a délka obrazovky bude 100% x 100%. Potřebujeme natáhnout obrázek na tuto šířku. Přidejte k položce obrázku v souboru style.css řetězec, který roztáhne obraz na celou šířku a délku monitoru. Jak je napsáno ve stylu CSS? Je to jednoduché!

tělo

{{

pozadí: url (Obrázky / Picture.jpg)

velikost pozadí: 100% - / * tato položka je vhodná pro většinu moderních prohlížečů * /

}}

Zde jsme a zjistili jsme, jak vytvořit pozadí obrazu v html na celé obrazovce. Existuje také způsob zápisu do souboru index.htm. Přestože je tato metoda zastaralá, je pro začátečníky nezbytné ji znát a pochopit. Ve značce (head) (styl) div {background-size: cover-} (/ style) (/ head) to znamená, že vybereme speciální blok pro pozadí, které bude umístěno po celé šířce okna. Zkoumali jsme 2 způsoby, jak vytvořit html obrázek na pozadí stránky, takže obraz je roztažen na celou šířku obrazovky v některém z moderních prohlížečů.

Jak vytvořit pevné pozadí

Pokud se rozhodnete použít obrázek jako pozadí budoucího webového zdroje, stačí se naučit, jak to udělat, aby se nestáhl na délku a nezničil estetický vzhled. Jednoduché s pomocí HTML kód předepište tento malý přírůstek. V souboru style.css musíte připojit jednu frázu po pozadí: url (Images / Picture.jpg) fixní - nebo přidat za ní samostatný řádek, středník - pozice: fixní. Tímto způsobem bude obrázek pozadí ztracen. Během procházení obsahu na webu zjistíte, že textové řádky se pohybují a pozadí zůstává na svém místě. Takže jste se naučil, jak vytvořit obrázek v html, několika způsoby.

Práce s tabulkou v HTML

Mnoho nezkušených webových vývojářů, když stojí před stoly a bloky, často nerozumí, jak vytvořit obrázek v html pozadí tabulky. Stejně jako všichni Příkazy HTML a styl CSS, je tento webový programovací jazyk poměrně jednoduchý. A řešení tohoto problému bude psát pár řádků kódu. Měli byste již vědět, že psaní řádků a sloupců tabulky se označuje jako značky (tr) a (td). Chcete-li vytvořit pozadí tabulky jako obrázek, musíte přidat značku (tabulku), (tr) nebo (td) s odkazem na obrázek: background = URL obrázku. Pro přehlednost uvádíme několik příkladů.

Tabulky s obrázkem místo pozadí: příklady HTML

Nakreslit 2x3 tabulku a učinit z něj obrázek na pozadí uloženy ve složce "Obrázky": (viz tabulka background = "images / picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) (Td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabulka). Takže náš stůl bude namalován na pozadí obrazu.

Nyní čerpat stejné velikosti deska 2x3, ale vložit obrázek ve sloupcích označených čísly 1, 4, 5 a 6. (viz tabulka) (TR) (td background = "Images / picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td pozadí = "Obrázky / picture.jpg") 4 (/ td) (td pozadí = "Obrázky / picture.jpg") 5 ( / td) (td background = "Obrázky / Picture.jpg") 6 (/ td) (/ tr) (/ tabulka). Po prohlížení vidíme, že pozadí se objevuje pouze v těch buňkách, ve kterých jsme se registrovali, ale ne v celé tabulce.

Místo pro více prohlížečů

Stále existuje taková věc, jako je zdroj webového zdroje mezi různými prohlížeči. To znamená, že stránky stránek budou zobrazeny stejným způsobem v různých typech a verzích prohlížečů. Současně musíte přizpůsobit kód HTML a styl CSS pro potřebné prohlížeče. Navíc v moderní době vývoje smartphonů se mnoho webových vývojářů snaží vytvořit stránky, které jsou přizpůsobeny jak pro mobilní verze, tak pro počítačové zobrazení.