Postavitev spletnega mesta: kako ustvariti sliko ozadja v html

Mnogi začetniki, ki le razumejo bistvo ustvarjanja spletnih strani, se pogosto sprašujejo, kako v html-u narediti ozadje sliko. In če nekateri ljudje lahko razumejo to težavo, še vedno obstajajo težave, medtem ko se slika razteza do celotne širine zaslona. V tem primeru bi rad, da bi bilo spletno mesto prikazano na enak način v vseh brskalnikih, zato je treba izpolniti zahtevo po združljivosti z več brskalniki. Ozadje lahko nastavite na dva načina: z uporabo HTML oznake

Osnovne HTML oznake za ustvarjanje ozadja

Torej, pojdimo na vprašanje, kako narediti ozadje v html-ju na celem 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. Na sliki je treba na začetku izbrati ali samostojno oblikovati s takšno razširitvijo, v kateri bo prikazana stran prikazane strani. Šele ko je slika ozadja pripravljena, jo prenesemo v mapo z imenom »Slike«. V njej bomo shranili vse uporabljene slike, animacije in druge grafične datoteke. Ta mapa mora biti v korenskem imeniku z vsemi vašimi html datotekami. Zdaj lahko odpreš kodo. Obstaja več možnosti za pisanje kode, s katero se ozadje spremeni v sliko.

1. Napišite atribut oznake.
2. Skozi slog CSS v HTML kodi.
3. Stavek CSS vnesite v ločeno datoteko.

Kot v HTML-ju, da bi ozadje ustvarili sliko, se odločite, vendar bi rad povedal nekaj besed o tem, kako bi bilo najbolj optimalno. Prva metoda s pisanjem skozi atribut oznake je že dolgo zastarela. Druga možnost se uporablja v zelo redkih primerih, samo zato, ker dobite veliko iste kode. In tretja možnost je najpogostejša in učinkovita. Tukaj so oznake primerov HTML:

1. Prvi način pisanja skozi atribut telesa v datoteki index.htm. V tej obliki je zapisano: (ozadje telesa = "map_name / name_pictures.extension") (/ body). To pomeni, da če imamo sliko z imenom »Slika« in razširitev JPG in smo jo mapo poimenovali kot »Slike«, bo koda HTML izgledala takole: (body background = "Images / Picture.jpg") hellip- (/ body ).
2. Druga metoda pisanja vpliva na slog CSS, vendar je napisana v isti datoteki, imenovani index.htm. (body style = "background: url (" ../ Images / Picture.jpg "))).
3. Tretji način snemanja pa poteka v dveh datotekah. Dokument z naslovom index.htm tag (glave), ki je zabeležena je vrstica: (glava) (povezava rel = "slogovno" type = "text / css" href = "Put_k CSS_faylu") (/ glavo). In v slogovni datoteki z imenom style.css že pišemo: body {background: url (Images / Picture.jpg `)}.

Kot v HTML-ju, da bi naredili sliko v ozadju, smo razstavili. Zdaj morate razumeti, kako raztegniti sliko po širini celotnega zaslona.

Načini raztegovanja slike ozadja na širino okna

Oglejmo si si naš zaslon kot odstotek. Izkazalo se je, da bo celotna širina in dolžina zaslona 100% x 100%. Sliko moramo razširiti na to širino. V slikovnem vnosu v datoteko style.css dodajte niz, ki bo raztegnil sliko na celotno širino in dolžino zaslona. Kako je napisano v slogu CSS? Enostavno!

telo

{

ozadje: url (Images / Picture.jpg)

velikost ozadja: 100% - / * ta vnos je primeren za večino sodobnih brskalnikov * /

}

Tukaj smo in ugotovili, kako narediti sliko ozadje v html na celem zaslonu. Obstaja tudi način pisanja v datoteki index.htm. Čeprav je ta metoda zastarela, je za začetnike potrebno vedeti in razumeti. V (glavi) (slog) div {background-size: cover-} (/ slog) (/ glava) tag to pomeni, da izberemo poseben blok za ozadje, ki bo postavljen po celotni širini okna. Preučili smo dva načina, kako narediti html slike v ozadju, tako da se slika raztegne do celotne širine zaslona v katerem koli sodobnem brskalniku.

Kako narediti fiksno ozadje

Če se odločite, da boste sliko uporabili kot ozadje prihodnjega spletnega vira, potem se morate naučiti, kako ga popraviti, da se ne raztezajo in ne pokvari estetskega videza. Dovolj preprost s pomočjo HTML koda predpiše ta majhen dodatek. V datoteki style.css morate dodati eno frazo za ozadje: url (Images / Picture.jpg `), ali dodajte ločeno vrstico po njej, podpičje - položaj: določen. Na ta način bo vaša slika v ozadju postala mirna. Ko se pomikate po vsebini na spletnem mestu, boste videli, da se vrstice besedila premikajo in da ozadje ostane na mestu. Torej ste se naučili, kako narediti ozadje v html, na več načinov.

Delo s tabelo v HTML

Mnogi neizkušeni spletni razvijalci, ko se srečujejo s tabelami in bloki, pogosto ne razumejo, kako narediti sliko v html ozadju tabele. Kot vsi Ukaze HTML in CSS slog, ta spletni programski jezik je precej preprost. In rešitev tega problema bo pisala nekaj vrstic kode. Morali bi vedeti, da se vrstni red vrstic in stolpcev zapisuje kot oznake (tr) in (td). Če želite ozadje tabele narediti kot sliko, morate oznaki (tabeli), (tr) ali (td) dodati preprosto besedno zvezo s povezavo do slike: background = URL slike. Za jasnost podajamo nekaj primerov.

Tabele s sliko namesto ozadja: primeri HTML

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) (Td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabela). Tako bo naša miza poslikana 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 background = "Slike / Picture.jpg") 6 (/ td) (/ tr) (/ tabela). Po ogledu vidimo, da se ozadje pojavlja le v tistih celicah, v katerih smo se registrirali, ne pa v celotni tabeli.

Spletno mesto brskalnika

Še vedno obstaja tako, kot je navzkrižni brskalnik vira spletnega vira. To pomeni, da bodo strani spletnega mesta prikazane na enak način v različnih vrstah in različicah brskalnikov. Hkrati morate prilagoditi HTML kodo in slog CSS za potrebne brskalnike. Poleg tega v sodobni dobi razvoja pametnih telefonov številni razvijalci spletnih mest poskušajo ustvariti spletna mesta, ki so prilagojena za mobilne različice in računalniški pogled.