Gnezdišče: kako narediti sliko ozadja html

Mnogi začetniki spletnih oblikovalcev, le da jama v bistvu ustvarjanje spletnih strani, ki se pogosto sprašujem, kako narediti sliko html ozadja. In če lahko nekatere od njih se ukvarjajo s tem problemom, pa je še vedno problem v času raztezanja celotno širino slike na monitorju. Hkrati pa bi rad videl na mestu so prikazane enako v vseh brskalnikih, tako da bi moral izpolnjevati zahteve navzkrižne brskalnik. Lahko nastavite ozadje na dva načina: z uporabo oznak HTML in CSS stilov. Vsak sam izbere najboljšo možnost. Seveda, CSS slog je veliko bolj priročen, saj je njegova koda shranjena v ločeno datoteko in ne prevzame dodatnih zvočnikov v oznake glavnega mesta, vendar najprej oglejmo preprost način za namestitev sliko na ozadju spletne strani.

Osnovni HTML oznake ustvariti ozadje

Torej, gremo na vprašanje, kako narediti sliko za ozadje v html na zaslonu. Da bi videti lepo mesto, morate razumeti, eno precej pomembno podrobnost: da je dovolj, samo, da bi gradient ozadje ali ga slikati trdno barvo, če pa boste morali vstaviti sliko za ozadje, ne bo se raztezajo po celotni širini monitorja. Slika je bila prvotno potrebno, da poberem ali pa svoj dizajn s tem podaljšanjem, v katerem bo prikazal stran mestu. Šele, ko je slika ozadja pripravljen, ga povlecite v mapo z imenom "Slike». V njej bomo shranjevanje vseh rabljenih slik, animacij in drugih grafičnih datotek. Ta mapa naj se nahaja v korenski imenik z vsemi svojimi html datoteke. Sedaj lahko premikate naprej in s kodo. Obstaja več možnosti za pisanje kode, s katero se bo ozadje spremenili sliko.

1. Napišite atribut oznake.
2. Skozi CSS slog v HTML kodi.
3. Pisanje CSS stilov v ločeni datoteki.

Kot v HTML, da bi ozadje, ste se odločili, ampak jaz bi rad povedal nekaj besed o tem, kako bi bilo najbolj optimalno. Prvi način je s pisanjem skozi atribut tag je že dolgo zastarela. Druga možnost se uporablja zelo redko, saj se izkaže, da je veliko isto oznako. Tretja možnost je najbolj pogosta in učinkovita. Tu so primeri HTML:

1. Prvi način snemanja prek oznake atributa (telesa) v index.htm datoteki. To je shranjena v tej obliki: (ozadje telesa = "Mapa / Nazvanie_kartinki.rasshirenie") (/ telo). To je, če imamo sliko z naslovom "Slika" in končnico JPG, in mapo smo ga poimenovali «Images», potem bo vnos HTML-kodo videti takole: (body background = "slike / slika.jpg") ... (/ body) .
2. Druga metoda vključuje snemanje slog CSS, vendar je napisana v isti datoteki z imenom index.htm. (Body style = "background: url (" ../ Images / slika.jpg ') ").
3. Tretji način snemanja je izdelan v dveh datotekah. Dokument z imenom index.htm oznako (glava) je je napisan tako vrstico: (glava) (povezava rel = "slogovno" type = "text / css" href = "http: // Spletna stran / članek / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ glava). Datoteka se imenuje style.css slog že napisal: body {background: url (Slike / slika.jpg ')}.

Kot v HTML, da bi sliko ozadja, smo razumeli. Zdaj morate ugotoviti, kako se raztezajo sliko po širini celotnega zaslona.

Ways, da se raztezajo na sliko za ozadje na širino okna

Mi predstavljajo našo zaslon v obliki odstotka. Izkazalo se je, da bo celotno širino in dolžino zaslona 100% x 100%. Moramo raztegnete sliko na to širino. Dodaj podoba pila snemanje style.css linijo, ki bo potekalo sliko po celotni širini in dolžini monitorja. Kot je zapisano v CSS stil? To je preprosto!

telo

{

background: url (Slike / slika.jpg)

Ozadje velikosti: 100%; / * Ta objava je primerna za večino sodobnih brskalnikov * /

}

Tako smo ugotovili, kako narediti slike ozadje v html na zaslonu. Na voljo je tudi način snemanja v datoteko index.htm. Čeprav te metode in zastarela, ampak za začetnike, da je treba poznati in razumeti. Oznaka (glava) (stil) div {background-size: pokrov; } (/ Style) (/ glava), ta zapis pomeni, da namenijo posebno enoto za ozadje, ki bo nameščena po celotni širini okna. Obravnavali smo dva načina, kako bi slike ozadje html stran, tako da je slika raztegnjena na celotno širino zaslona, v kateri od sodobnih brskalnikov.

Kako narediti določeno ozadje

Če se odločite za uporabo sliko kot ozadje prihodnje spletnih virov, potem si morate vedeti, kako narediti to določen, tako da se ne raztegne v dolžino in ne pokvari estetski videz. Preprosto s pomočjo HTML kodo za registracijo majhen dodatek. Morate vložiti style.css dodati stavek po ozadje: url (Slike / slika.jpg ") določen; Po podpičjem ločene linije, ali namesto dodano - igro: fiksni. Tako bo vaše ozadje treba določiti. Med pomikanjem vsebine na spletno stran, boste videli, da je besedilo vrstice se gibljejo, vendar je v ozadju še vedno na svojem mestu. Torej, ste se naučili, kako narediti html ozadje, na več načinov.

Delo s tabelami v HTML

Mnogi neizkušeni spletni razvijalci, soočajo z mizami in bloki, pogosto ne razumejo, kako narediti tabelo html sliko ozadja. Kot vse ekipe HTML in CSS stilov, spletni programski jezik je dokaj preprost. In rešitev tega problema je, da napišete par vrstic kode. Moral bi že vedeli, da je pisanje tabelo vrstic in stolpcev, v tem zaporedju, kot je navedeno v oznake (tr) in (TD). Da bi ozadje tabele v obliki slike, je treba dodati oznako (tabela), (tr) ali (TD) preprostega stavka s sklicevanjem na referenčni sliki: ozadje = URL slike. Zaradi jasnosti, smo dali nekaj primerov.

Tabela s sliko namesto ozadju: HTML primeri

Narišite 2x3 mizo in da je ozadje slike shranijo v mapo "Slike": (namizni ozadju = "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) (/ tabelo). Tako bo naša tabela sestavljena v ozadju slike.

Sedaj sestavi enake velikosti tablici 2x3, ampak vstaviti sliko v stolpce 1, 4, 5 in 6 (tabela) (tr) (TD ozadja = "slike / slika.jpg") 1 (/ TD) (TD) 2 (/ TD) (TD) 3 (/ TD) (/ TR) (TR) (TD ozadja = "slike / slika.jpg") 4 (/ TD) (TD ozadja = "slike / slika.jpg") 5 ( / TD) (TD ozadja = "slike / slika.jpg") 6 (/ TD) (/ TR) (/ table). Po ogledu lahko vidimo, da se zdi, da v ozadju le v tistih celicah, v katerih smo bili registrirani, in ne celotno tabelo.

Navzkrižno brskalnik združljivost stran

Obstaja taka stvar kot navzkrižno brskalnik združljivost spletni vir. To pomeni, da je vaša stran enako dobro prikazana v različnih tipov in različic brskalnikov. To bi moralo biti HTML kodo in CSS stilov, da prilagodite potrebne brskalnikov. Poleg tega je v moderni dobi pametnih telefonov, so številni spletni razvijalci poskušajo ustvariti mesta in prilagojena za mobilno različico in računalniški videz.