Gnezdišče: kako html narediti sliko ozadja

številne nove postavitve, samo priti do srca ustvarjanja strani, pogosto sprašujejo, kako html narediti sliko ozadja.In če lahko nekatere od njih se ukvarjajo s tem problemom, še vedno imate težave med stretch celotno širino slike na monitorju.Hkrati pa bi rad videl na mestu so prikazane na vseh brskalnikih, tako da mora biti v skladu z zahtevami krossbrauzernosti.Lahko nastavite ozadje na dva načina: z uporabo oznak HTML in CSS stilov.Vsak zase izbere najboljšo možnost.Seveda, CSS slog je veliko bolj priročno, saj je koda shranjena v ločeno datoteko in ne prevzame dodatnih zvočnikov v glavnih mest oznake, ampak najprej razmisli preprosto metodo določanja sliko za ozadje na spletni strani.

osnovni HTML oznake, da ustvarite ozadje

Torej, pojdite na vprašanje, kako narediti sliko za ozadje html na zaslonu.Da bi si lepa stran, morate razumeti precej pomembno podrobnost: to je dovolj, samo, da bi gradient ozadje ali trdne barve, da ga barve, vendar če želite vstaviti sliko v ozadju, ne bo se raztezajo po celotni širini monitorja.Podoba je bila prvotno potrebno, da poberem ali narediti svoj dizajn s tem podaljšanjem, v katerem bo prikazal stran.Šele ko je slika ozadja pripravljen, ga premaknete v mapo, imenovano "Images».V njej bomo lahko shranite vse rabljene slik, animacije in druge slikovne datoteke.Ta mapa mora biti v korenskem imeniku datoteko z vse vaše html.Sedaj lahko premaknete na kodo.Obstaja več možnosti za snemalno kodo, s katero se bo vzorec spremeni sliko.

  1. Napiši atribut tag.
  2. preko CSS slog v HTML kodo.
  3. Pisanje CSS slog v ločeni datoteki.

Kako do HTML narediti sliko ozadja, za vas, da odloči, ampak jaz bi rad povedal nekaj besed o tem, kako bi bilo najbolj optimalno.Prvi način je s pisanjem skozi je oznaka že dolgo zastarela.Druga možnost se uporablja zelo redko, ker se je izkazalo, da je veliko isto kodo.Tretja možnost je najbolj pogosta in učinkovita.Tukaj je primere HTML oznake: prva metoda

  1. posneti skozi tag (telesa) v datotečnem index.htm.To je napisano v tej obliki: (body background = "Nazvanie_papki / Nazvanie_kartinki.rasshirenie") (/ telo).To je, če imamo sliko z imenom «Slika» in razširitev JPG, in mapa smo poimenovali «Images», potem bi zapis HTML-kodo izgleda takole: (body background = "Slike / Picture.jpg") ... (/ body).
  2. Druga metoda vključuje snemanje CSS styling, ampak je napisan v isti datoteki z imenom index.htm.(body style = "background: url ('../ Images / Picture.jpg')").
  3. In tretja Postopek zajemanja izdelan iz dveh datotek.Dokument z imenom index.htm oznako (glave), ki je napisal takšno vrstico: (glava) (povezava rel = "slogovno" type = "text / css" href = "Put_k CSS_faylu") (/ glavo).Slog Datoteka z imenom style.css že napisal: body {background: url (Images / Picture.jpg ")}.

Kako do HTML narediti sliko v ozadju, smo se pogovarjali.Zdaj morate ugotoviti, kako se raztezajo sliko po širini celotnega zaslona.

metode raztezanja ozadje na širino okna

predstavljate našo zaslon v odstotkih obliki.Izkaže se, da bo celotna dolžina in širina zaslona 100% x 100%.Moramo raztegnete sliko, da te širine.Dodaj na snemanje slike v vrstici datoteke style.css, ki bo potekalo sliko na celotni širini in dolžini monitorja.Kot je zapisano v vašem CSS stil?To je preprosto!

telo

{

background: url (Images / Picture.jpg)

background-size: 100%;/ * Ta objava je primerna za večino sodobnih brskalnikov * /

}

Tako smo pogruntal, kako narediti slike ozadje html na zaslonu.Obstaja način snemanja v datoteki index.htm.Čeprav te metode in zastarela, ampak za začetnike je potrebno poznati in razumeti.Oznaka (glava) (stil) div {background-size: pokrov;} (/ Style) (/ glava), ta zapis pomeni, da dodeli posebno enoto za ozadje, ki bo nameščen po celotni širini okna.Obravnavali smo dva načina, da bi mesto v ozadju slike html, se slika raztegne na celotno širino zaslona v kateri od sodobnih brskalnikov.

Kako narediti fiksno ozadje

Če se odločite, da uporabite sliko kot ozadje prihodnost spletnega vira, potem si morate vedeti, kako narediti to določen, tako da se ne raztezajo v dolžino in ne pokvari estetski videz.Preprosto z uporabo HTML kode za registracijo majhen dodatek.Morate style.css datoteko dodati en stavek po ozadju: url (Images / Picture.jpg ") določen;ali po podpičjem ločene vrstice namesto dodane - stališče: fiksna.Tako določen bo vaš ozadje.Med pomikanjem mesto vsebino, boste videli, da so vrstice, premika, ampak v ozadju je še vedno v veljavi.Torej, ste se naučili, kako v html narediti sliko za ozadje, na več načinov.

delo s tabelami v HTML

Mnogi neizkušeni spletne razvijalce, ki se sooča z mizami in enotami pogosto ne razumejo, kako v html narediti sliko tabeli ozadja.Kot vse ekipe HTML in CSS stilov, jezik spletno programiranje je dokaj preprost.In rešitev tega problema je, da napišete nekaj 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 bo ozadje tabele v obliki podob, je treba dodati oznako (tabela), (tr) ali (TD) preprostega stavka s sklicevanjem na sliki: ozadje = URL slike.Zaradi jasnosti, smo dali nekaj primerov.

mize z ozadjem slike namesto: primeri HTML

Nariši 2x3 mizo in da je slika ozadja shranjen v mapi "Slike": (tabela ozadju = "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) (/ miza).Tako bo naša tabela sestavljena v ozadju slike.

Zdaj pripravijo enako ploščo velikosti 2x3, ampak vstaviti sliko v številnih stolpcu 1, 4, 5 in 6. (tabela) (tr) (TD ozadju = "Slike / Picture.jpg"), 1 (/ td)(TD), 2 (/ td) (TD), 3 (/ td) (/ TR) (tr) (td background = "Slike / Picture.jpg") 4 (/ td) (TD ozadja = "Slike / Picture.jpg"), 5 (/ td) (td background =" images / Picture.jpg ") 6 (/ td) (/ TR) (/ miza).Po ogledu lahko vidite, da se v ozadju pojavi samo v tistih celicah, v katerih smo registrirani, ne pa celotno tabelo.

Cross brskalnik site

Obstaja taka stvar kot navzkrižno brskalnik združljivost spletnega vira.To pomeni, da bodo strani v mestu, se enako dobro prikazani v različnih tipov in različic brskalnikov.To bi moralo biti HTML koda in CSS prilagodite slog brskalniki zahtevano.Poleg tega so v moderni dobi pametnih telefonov, so mnogi razvijalci spletne poskušajo ustvariti spletnih strani, ki so prilagojene in mobilno različico računalnika in videz.