Cum grafica de fundal pe web (HTML) pagini și alte facilități - Aspect html

Noi vă învață cum să creați prima de pagini web

Other.html se introduce în fișierul ca fundal pagina WEB schita winner.jpg, pe care le-am păstrat în dosarul web, în ​​experiențele din trecut.

Adăugați la sfârșitul eticheta de deschidere Stilul background-image: url ( 'winner.jpg'); astfel încât eticheta Pentru a urmări forma:

Într-o fereastră de browser, veți vedea că acum fundalul acestei pagini nu este monocrom albastru ca și înainte, iar imaginea fotografiilor încărcate am înregistrat în fișierul winner.jpg. În acest context apare un brand nou document text și schiță image.gif. Dar amintesc că noi nu am eliminat atributul bgcolor al etichetei . În astfel de cazuri, atunci când eticheta specifica ambele atribute - bgcolor și fundal - browser-ul oferă, de obicei, de preferință atribut de fundal folosit, dar, în cazul în care descărcarea imagine de fundal ireal, folosit atributul bgcolor.

Context pe pagina de web prin CSS

O altă metodă de determinare a fundalului - folosind limbajul CSS stiluri în cascadă. După cum puteți vedea în acest moment, această metodă oferă o pagină web dezvoltator este mult mai mare capabilități de gestionare a imaginii de fundal. Deci, a fost mai ușor să se familiarizeze cu ele, se introduce o winner.jpg schiță ca imagine de fundal a doua pagină WEB a site-ului nostru web, stocate list.html într-un fișier, folosind limbajul Cascading Style Sheets.

Am stabilit anterior apariția textului de pe prima pagină web folosind limbajul Style Sheets Cascading, specificând stiluri ca valoarea atributului stil în tag-ul <р>. Dar există încă, mai de dorit definiții opțiunea de stil, în care descrierea foii de stil este plasat în interiorul WEB antetul documentului ... în tag-ul de deschidere trebuie să aibă forma urmează:

Inserați această etichetă în fișierul list.html HTML code.

Introduceți linia goală în fișierul după list.html elementul Ce ne pasionează? și introduce etichete , așa cum este indicat mai sus. pagini WEB header cod HTML, închise între tag-uri ..., Sunt obligat să aibă astfel de puncte de vedere:

Ce ne pasionează? și introduceți codul indicat care definește stilul corpului elementului.

element HTML ar trebui să arate modul următor:

List.html Salvați fișierul și deschideți-l în browser. Veți găsi că ați setat anterior de fundal de culoare înlocuită cu imaginea de fișier winner.jpg și conținutul text al documentului este afișat astăzi pe noul fundal.

În cazul în care textul este dificil de a vedea pe noul fundal, schimba culoarea folosind textul atributului tag , de exemplu, .

Conectați proprietatea indicată în codul HTML al unui list.html fișier, astfel încât elementele Pentru a urmări forma:

Reproducerea pe fundal (HTML) pagina WEB

Acum, schiță browser-ul de fundal are doar cea mai mare parte a documentului. Este mai mică și poate fi partea dreaptă, în cazul monitorului de înaltă rezoluție, umplut cu fundal auto colorat, pe care ați stabilit anterior.

Proprietatea de fundal se poate repeta, de asemenea, următoarele semnificații:

repeta - fundal se repetă atât pe orizontală cât și pe verticală; Aceasta este setarea implicită;

repeta-x - fond se repetă numai pe orizontală;

repeat-y - fond repetată numai pe verticală.

Poziționați imaginea de fundal pe o pagină poate fi modificată folosind fundal poziția caracteristică. Deoarece valorile caracteristicilor cuvintelor cheie specificate caracterizează poziția imaginii pe verticală - de sus (de sus), centru (mijloc), partea de jos (a scăzut) - și pe orizontală - stânga (stânga), centru (centru), dreapta (dreapta). Prima indică poziția verticală. De exemplu, codul background-position: centru centru se aliniază conturul pe paginile centrului pe orizontală cât și pe verticală.

Adăugați o descriere a parametrilor fișierului element de corp list.html proprietate background-position: centru centru. element Acest fișier ar trebui să ia forma ulterioară:

Cum de a face o schiță a fundalului pe pagina WEB

schița de fundal va fi plasat în centrul paginii, la aceeași inferioară și superioară parte a paginii, iar dreapta și la stânga monitorului la o rezoluție de 1024 x 768 și mai sus, va fi umplut cu o culoare solidă.

Puteți, dar pentru a capta imaginea, astfel încât, atunci când parcurge paginile de fundal a rămas nemișcat, iar textul este mutat în raport cu imaginea de fundal. În acest scop, în elementul corp, utilizați proprietatea background-attachment cu o valoare fixă: background-attachment: fix.

Conectați proprietatea indicată în descrierea elementului de corp de stil. element Codul HTML fișier list.html ar trebui să ia forma urmeze:

Acum, veți vedea că atunci când derulați pagina imagine de fundal rămâne nemișcat, și text, precum și alte elemente ale paginii web sunt mutate în fundal.

Vezi tu, introducerea limbii de Cascading Style Sheets oferă mai multe oportunități pentru prezentarea imaginii de fundal pe pagina WEB, decât utilizarea atributului de fond în tag-ul .

Informații suplimentare privind

O descriere a modului de a insera propria prima verigă în textul de pe (HTML) pagina web

Completă și detaliată descriere a formatelor grafice utilizate pe internet și că se recomandă, în unele cazuri, de a utiliza un

Descrierea modului ușor și corect făcut liste de valori pe web pagini (HTML)