Multe aspect nou, doar a ajunge la inima de a crea site-uri, de multe ori întreb cum de a HTML pentru a face imaginea de fundal.Iar dacă unele dintre ele pot face cu această problemă, aveți în continuare probleme în timpul stretch întreaga lățime a imaginii de pe monitor.În același timp, aș dori să văd site-ului sunt afișate pe toate browserele, așa că trebuie să respecte cerințele krossbrauzernosti.Puteți seta un fundal în două moduri: prin utilizarea tag-uri HTML si stiluri CSS.Fiecare pentru sine selectează cea mai bună opțiune.Desigur, stilul CSS este mult mai convenabil, deoarece codul este stocat într-un fișier separat și nu ocupă boxe suplimentare în principalele tag-uri site-ul, dar ia în considerare în primul rând o metodă simplă de a stabili imaginea de fundal pe site-ul.
tag-uri HTML de bază pentru a crea fondul
Deci, du-te la întrebarea cum de a face o imagine de fundal pentru a html pe ecran.În scopul de a arata site-ul frumos, trebuie să înțelegeți un detaliu destul de important: este suficient doar pentru a face un fundal gradient de sau o culoare solidă pentru a picta, dar dacă doriți să introduceți imaginea în fundal, acesta nu va întinde pe întreaga lățime a monitorului.Imaginea a fost inițial necesară pentru a ridica sau de a face design-ul propriu cu această extensie, în care va afișa pagina.Numai atunci când imaginea de fundal este gata, se muta într-un folder numit "Imagini".În ea, ne va stoca toate imaginile second hand, animații și alte fișiere de imagine.Acest dosar ar trebui să fie în directorul rădăcină a fișierului cu toate HTML.Acum puteți trece la codul.Există mai multe opțiuni pentru cod de înregistrare, prin care modelul se va schimba imagine.
- tag Scrie atribut.
- prin stil CSS în codul HTML.
- stil Scrie CSS într-un fișier separat.
Cum sa HTML pentru a face imaginea de fundal, pentru tine de a decide, dar aș dori să spun câteva cuvinte despre cum s-ar fi cel mai optim.Prima metodă este prin scrierea printr-o etichetă a fost mult timp depășite.A doua opțiune este folosită foarte rar, pentru că se pare că o mulțime de același cod.O a treia opțiune este cea mai comună și eficientă.Iată exemplele Tag HTML:
- prima metodă de înregistrare a printr-o etichetă (corp), în index.htm fișier.Este scris în această formă: (corp de fond = "Nazvanie_papki / Nazvanie_kartinki.rasshirenie") (/ corp).Asta este, dacă avem o imagine cu numele «imagine» și extinderea JPG, iar dosarul am denumit «Imagini», apoi recordul de HTML-cod ar arata astfel: (organism fundal = "Imagini / picture.jpg") ... (/ corp).A doua metodă
- implică înregistrarea CSS styling, dar este scris în același fișier cu numele index.htm.(organism style = "background: url (" Imagini ../ / picture.jpg ")").
- Și a treia metodă de înregistrare se face în două fișiere.Documentul cu eticheta de nume index.htm (cap) este scrisă o astfel de linie: (cap) (link rel = tip "stylesheet" = "text / css" href = "Put_k CSS_faylu") (/ cap).Un fișier de stil numit style.css scrie deja: body {background: url (Imagini / picture.jpg ")}.
Cum sa HTML pentru a face imaginea de fundal, am discutat.Acum trebuie să dau seama cum de a întinde imaginea pe lățimea întregul ecran.Metode
de stretching imaginea de fundal pe lățimea ferestrei
imagina ecran noastră în formă procentuală.Se pare că toată lungimea și lățimea ecranului va fi de 100% x 100%.Avem nevoie să se întindă pe imagine pentru această lățime.Adauga la înregistra imagini în linia de fișier style.css care se va întinde imaginea pentru întreaga lățimea și lungimea a monitorului.După cum este scris in stilul tau CSS?E simplu!
corp
{
background: url (Imagini / picture.jpg ")
background-size: 100%;/ * Acest post este potrivit pentru cele mai moderne browsere * /
}
Așa că am dat seama cum să facă fundalul imaginii pentru a html pe ecran.Există o metodă de înregistrare în index.htm fișier.Deși această metodă și depășite, dar pentru incepatori, este necesar să cunoască și să înțeleagă.TAG (cap) (stil) div {background-size: Capac;} (/ Stil) (/ cap), acest record înseamnă că aloca o unitate specială pentru fundal, care va fi poziționat pe întreaga lățime a ferestrei.Am considerat două moduri de a face imagine de fundal html site-ul, imaginea este întinsă la întreaga lățime a ecranului, în oricare dintre browserele moderne.
Cum sa faci un fundal fix
Dacă decideți să utilizați imaginea ca fundal viitorul resursei web, atunci trebuie doar să știi cum să facă fix, astfel încât să nu se întinde în lungime și nu strica aspectul estetic.Pur și simplu prin utilizarea Codul HTML pentru a înregistra un plus de mic.Aveți nevoie pentru a style.css fișier pentru a adăuga o propoziție după fondul: url (Imagini / picture.jpg ") fix;sau în locul adaugă după virgulă linie separată - poziția: fixe.Astfel, imaginea de fundal va fi fixat.În timpul scrolling un site de conținut, veți vedea că liniile de text sunt în mișcare, dar fondul rămâne în vigoare.Deci, ați învățat cum să HTML pentru a face imaginea de fundal, în mai multe moduri.
lucra cu tabele in HTML
Mulți dezvoltatori web fără experiență, care se confruntă cu mese și unități de multe ori nu înțeleg cum să HTML pentru a face imaginea de fundal de masă.La fel ca toate stilurile echipele HTML si CSS, limbajul de programare web este destul de simplu.Și soluția la această problemă este de a scrie o pereche de linii de cod.Ar trebui să știi deja că scrie o masă de rânduri și coloane, respectiv, așa cum este indicat prin tag-uri (TR) și (TD).Pentru a face fundalul tabelului sub forma de imagini, este necesar să se adauge la eticheta (de masă), (tr) sau (TD) o frază simplă, cu referire la imaginea de: fundal = URL a imaginii.Pentru claritate, vom da câteva exemple.Tabele
cu fundal imagine în loc: exemple HTML
trage o masă 2x3 și fac imaginea de fundal stocate în dosarul "Imagini": (fondul de masă = "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) (/ masă).Deci masa noastră va fi trase în fundal a imaginii.
Acum trage aceeași placă dimensiuni 2x3, dar introduce o imagine într-un număr de coloana 1, 4, 5 și 6. (tabelul) (tr) (fond td = "Imagini / picture.jpg") 1 (/ TD)(TD) 2 (/ td) (TD) 3 (/ TD) (/ tr) (tr) (fond td = "Imagini / picture.jpg") 4 (/ TD) (TD fond = "Imagini / picture.jpg") 5 (/ TD) (fond td =" Imagini / picture.jpg ") 6 (/ TD) (/ TR) (/ masă).Dupa ce a vazut poate observa că fundal apare numai în acele celule, în care am înregistrat, dar nu întregul tabel.
site-ul Cross-browser
Există un astfel de lucru ca cross-browser resurse compatibilitate web.Acest lucru înseamnă că paginile site-ul va fi la fel de bine afișate în diferite tipuri și versiuni de browsere.Ar trebui să fie Codul HTML si CSS pentru a personaliza stilul cerut de browsere.Mai mult decât atât, în epoca modernă de telefoane inteligente, mulți dezvoltatori web încearcă să creeze site-uri care sunt adaptate și o versiune mobilă a unui computer și aspect.
