Pesapaiga: kuidas teha tausta pilt html

Paljud algajad veebidisainerid, ainult süveneda sisuliselt loomine, sageli ei tea, kuidas seda teha html taustapilt. Ja kui mõned neist võivad selle probleemi lahendamiseks, on see siiski probleemiks ajal venitades kogu laius pilti monitori. Samal ajal tahaksin näha saidi kuvatakse identselt kõik brauserid, nii et see peaks vastama piiriülese brauser. Saate määrata tausta kahel viisil: kasutades HTML sildid ja CSS stiile. Iga ise valib parim valik. Muidugi, CSS stiilis on palju mugavam, sest selle kood salvestatakse eraldi faili ja ei võta extra kõlarid peamine saidi silte, kuid kõigepealt mõtelgem lihtne meetod paigaldus pildi taustal saidile.

Basic HTML sildid luua tausta

Niisiis, me läheme küsimus, kuidas muuta taustapilti html ekraanil. Et vaadata kaunis kohas, siis tuleb mõista pigem ühe oluline detail: piisab vaid teha gradient tausta või värvida värviga, kuid kui teil on vaja sisestada taustapilt, siis ei venitada kogu laiust monitor. Pilt oli algselt vaja kiirenemist või teha oma disaini Selle laienduse, kus sul kuvada lehel kohapeal. Ainult siis, kui taustapilt on valmis, lohistage see soovitud kausta nimega «Images». Seal me salvestada kõik kasutatud pildid, animatsioonid ja muu graafika faile. See kaust peaks asuma juurkataloogi kõigi oma html failid. Nüüd saate liikuda ja kood. On mitmeid võimalusi kirjalikult koodi, mille taustal muutub pilt.

1. Kirjutage tag atribuut.
2. Läbi CSS stiili HTML koodi.
3. Kirjutage CSS stiile eraldi faili.

Nagu HTML teha Taustakujutise teil otsustada, kuid tahaksin öelda paar sõna selle kohta, kuidas oleks kõige optimaalsem. Esimene meetod on kirjutada läbi tag atribuut on juba ammu aegunud. Teine võimalus on kasutada väga harva, sest selgub, et palju sama koodi. Kolmas võimalus on kõige levinum ja tõhusam. Siin on näited HTML tags:

1. Esimene salvestus meetod läbi tag atribuut (keha) in index.htm faili. See on salvestatud selles vormis: (body taust = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ keha). See tähendab, et kui meil on pilt, mille pealkiri «Pilt» ja laiendamine JPG ja kaust me nimetasime «Images», siis HTML-koodi sisestamise näeb välja selline: (keha taust = "Images / pilt.jpg") ... (/ body) .
2. Teine meetod hõlmab salvestamise CSS stiili, kuid see on kirjutatud sama faili nimi index.htm. (Body style = "background: url (" ../ pildid / pilt.jpg ")").
3. Kolmas meetod salvestus on tehtud kaks faili. Dokument nimega index.htm tag (pea) on kirjutatud selline rida: (pea) (link rel = "laaditabeli" type = "text / css" href = "http: // saidi / artikkel / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ pea). Fail nimega style.css stiilis juba kirjutada: keha {background: url (pildid / pilt.jpg ')}.

Nagu HTML teha taustapilt, saame aru. Nüüd sa pead välja mõtlema, kuidas venitada pilt laiuti kogu ekraani.

Võimalusi venitada taustapilt akna laius

Me esindame meie ekraanil kujul protsentides. Tuleb välja, et kogu laiuse ja pikkuse ekraan 100% x 100%. Peame venitada pilt sellele laius. Lisa pildifaili salvestamise style.css line, et venitada pilt kogu laiuse ja pikkuse monitor. Nagu on kirjutatud CSS stiili? See on lihtne!

keha

{

background: url (pildid / pilt.jpg ")

background-size: 100%; / * See postitus sobib enamiku kaasaegsete brauseritega * /

}

Nii et me arvasin, kuidas teha pilt taust html ekraanil. Samuti on meetod salvestamisel index.htm faili. Kuigi see meetod ja vananenud, kuid algajatele on vaja teada ja mõista. Märgis (pea) (stiil) div {background-size: kate; } (/ Style) (/ pea), see kirje tähendab, et me eraldada eriüksus tausta jaoks, mis kestab asetatakse üle kogu akna laiusele. Me kaalusime kahel viisil, kuidas teha tausta pilt html saidi nii, et pilt on venitatud kogu ekraani laiusest üheski kaasaegsete brauseritega.

Kuidas teha kindlaks tausta

Kui te otsustate kasutada pildi taustana tulevikus web ressurss, siis sa lihtsalt pead teadma, kuidas teha seda kindlaks, et see ei ole venitatud pikk ja ei riku esteetiline välimus. Lihtsalt kasutades HTML koodi registreeru väike täiendus. Sa pead esitama style.css lisada lause pärast background: url (pildid / pilt.jpg ") fikseeritud; või hoopis lisatakse semikoolonina eraldi asetsevad - koht: fikseeritud. Seega oma tapeet on fikseeritud. Kerimise ajal saidi sisu, siis näete, et teksti read liiguvad, kuid taustal jääb paigale. Nii et sa õppinud, kuidas teha html taustapilt mitmel viisil.

Töö Tabelid HTML

Paljud kogenematud veebiarendajad, silmitsi lauad ja plokid, sageli ei saa aru, kuidas teha html pilt tausta tabelis. Nagu kõik meeskonnad HTML ja CSS stiile, veebi programmeerimine keeles on üsna lihtne. Ja lahendus sellele probleemile on kirjutada paar rida koodi. Sa peaksid juba teadma, et kirjalikult tabeli ridade ja veergude vastavalt millele viitab silte (tr) ja (td). Et tausta tabeli kujul pilt, on vaja lisada tag (tabel), (tr) või (td) lihtne fraas võrdlussälgu pilt: taust = URL pilte. Selguse huvides anname paar näidet.

Tabel pildiga asemel taust: HTML näited

Joonista 2x3 laud ja muuta see taustapilt salvestatud kausta "Images": (tabel taust = "Images / pilt.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabelis). Nii et meie tabeli loositakse taustal pilti.

Nüüd juhtida sama plaadi suurused 2x3, kuid sisestada pildil olevad veerud on nummerdatud 1, 4, 5 ja 6. (tabel) (tr) (td taust = "Images / pilt.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td taust = "Images / picture.JPG") 4 (/ td) (td taust = "Images / picture.JPG") 5 ( / td) (td taust = "Images / picture.JPG") 6 (/ td) (/ tr) (/ tabelis). Pärast vaadates näeme, et taustal tundub ainult need rakud, mis me registreeritud, ja mitte kogu tabel.

Cross-brauseri ühilduvuse saidi

On olemas selline asi nagu rist brauseri ühilduvuse web ressurss. See tähendab, et teie sait on võrdselt hästi kuvatakse erinevat tüüpi ja versiooni brauseritega. See peaks olema HTML kood ja CSS stiile kohandada vajalik brauseritega. Lisaks ajastul nutitelefonide paljud veebiarendajad üritavad luua saite ja kohandatud mobiilne versioon ja arvuti välimus.