Este cunoscut faptul că lățimea ferestrei browser-ului variază în limite destul de largi, astfel încât podgadat sub nu este posibil. Setați imaginea de pe întreaga lățime poate fi numai în cazul în care un aspect fix. Lățimea în acest caz, este clar definit, și să facă un desen de dimensiunea necesară este destul de simplu. Este necesar să se clarifice faptul că noi nu vorbim despre lățimea unei pagini web ca atare, ci numai despre lățimea layout, toate informațiile se încadrează în asta. De exemplu, la site-ul boeing.com aplicat această abordare (Fig. 1) și lățimea totală a imaginii nu depășește o valoare predeterminată.
Fig. 1. Acasă site-ul boeing.com
Prin „cauciuc“ aspect atunci când este necesar pentru a seta o imagine pe întreaga lățime a ferestrei browser-ului, indiferent de dimensiunea sa, utilizați metode care sunt descrise în detaliu în continuare.
Intinzandu desenul la 100%
Prima metodă constă în faptul că tag-ul Lățimea valoare este setată la 100% (Exemplul 1). Imaginea în acest caz se extinde pe întreaga lățime a containerului și înălțimea rămâne neschimbată. Este clar că cifra va fi în mod inevitabil distorsiunea, astfel încât această metodă este rar utilizată și nu pentru toate imaginile.
Exemplul 1. Lățimea imaginii
În acest exemplu, lățimea (lățimea) este setată la 100% desen, iar înălțimea (înălțime) - 100 pixeli.
Folosind imagini de fundal fără sudură
Ar trebui să se pregătească mai întâi o imagine de fundal, trebuie să fie de așa natură încât, dacă există pune două imagini identice, ele fuziona într-o singură, și nu există nici o artefacte vizibile între ele. Un exemplu de astfel de imagine este prezentată în Fig. 2.
Fig. 2. Imaginile pentru a crea fundaluri
Lățimea imaginii este suficient pentru a face 20-30 de pixeli.
Feriți-vă de a face lățimea prea mică a unui astfel de imagine, cum ar fi de 1-2 pixeli, deoarece acest lucru va aduce numai prejudicii. Dimensiunea fișierului este redus ușor, iar browser-ul va trebui să aibă timp suficient pentru a deplin „deschide“ zona dorită. Și va fi vizibil.
de fond în sine este de interes numai ca parte a rezultatului global. Acest lucru înseamnă că, în zona de fundal ar trebui să impună o altă imagine, astfel încât împreună formează un ansamblu coerent. Fig. 3 prezintă imaginile marginea din dreapta care coincide cu modelul de fundal. Prin urmare, atunci când se aplică acest model pe fundal, ei doar coincid.
Fig. 3. Imagine de fundal aplicate
Această imagine ar trebui să fie aliniată la marginea din stânga a ferestrei browser-ului ca marginea din dreapta se aliniază cu model de fundal. În acest caz, iar imaginea și fundal forma o imagine completă. Exemplul 2 prezintă crearea unei astfel de unități prin utilizarea proprietăților stilului de fundal.
Exemplul 2: Imagine de fundal
În acest exemplu, înălțimea blocului este specificată utilizând proprietățile de înălțime. ea coincide cu înălțimea desenului, iar lățimea sa este egală cu auto implicit. cu alte cuvinte, acesta preia întreaga lățime disponibilă. Repetând fundal apare numai pe orizontală, asigură valoarea setării de fundal repeta-x.
Utilizați o imagine de fundal nu este întotdeauna necesar, uneori, este destul de potrivit și-o singură culoare umple o zonă dreptunghiulară. Pentru a poziționa perfect imaginea de pe acest fundal, cifra folosită efecte de tonifiere (sepia, cum este, de asemenea, numit) sau tranziția gradientului, așa cum se arată în Fig. 4.
Fig. 4. Imagine cu un gradient care urmează să fie plasat pe un fond colorat
Fișierele de imagini în format JPEG nu sunt întotdeauna adecvate pentru aplicarea pe fondul colorat al faptului că acest format distorsionează imaginea. În acest fel, o tranziție lină de la imagine în fundal nu poate fi posibil, după cum se va observa o cusătură vizibilă. În acest caz, este mai bine să utilizați formatul GIF.
Când se utilizează un cod monocrom de fundal se va schimba ușor (exemplul 3). Se repetă de fundal nu mai este necesară, astfel încât opțiunea de fond va avea o singură valoare - culoarea de fundal dorită.
Exemplul 3: Culoare fundal
floare-show-
În acest exemplu, am stabilit parametrii bloc - înălțimea și culoarea, precum și caracteristicile textului antet. Rezultatul este prezentat în Fig. 5.
Fig. 5. Combinația de culori de fundal și de model
Wallpaper lățime mare
Metoda anterioară, deși folosită destul de des și dă rezultate destul de adecvat încă nu stabilește un model pe întreaga lățime a aspectului. Pentru a realiza acest lucru, se utilizează următorul algoritm. Inițial imagine pregătit lățime suficient de mare (pe pixeli 1000-1200), după care este plasat ca un model de fundal pentru stratul particular.
Fig. 6. Imaginea de fundal în fereastra browser-ului
Exemplul 4 arată cum se obține un rezultat similar. Acesta a aplicat din nou fond de proprietate. ca valoarea sa este definită prin: culoarea de fundal, acesta va fi afișat până când imaginea nu este încărcată; calea către imaginea de fundal și setările acestuia. Deci, valoarea din dreapta sus înseamnă că marginea din dreapta a imaginii va fi stabilită, iar atunci când modificați lățimea ferestrei browser-ului va apărea la stânga o parte invizibilă a imaginii. Dacă eliminăm acest argument, marginea din stânga va fi stabilită în mod implicit.
Exemplul 4. Figura lățimea completă a paginii