Cum se întinde imaginea de fundal pe întreaga lățime a unității, ecran, proiectarea si dezvoltarea site-ului

Bună ziua. 🙂

După ce am căutat o modalitate de a întinde bloc de fundal sau întregul site pentru întreaga lățime și înălțime. Și să-l facă astfel încât să existe o scalarea automată a fundalului. Asta este, nu doar să se întindă și să piardă proporțiile imaginii, și să-l arate bine fără distorsiuni.

Am scotocit amintesc o mulțime de informații și a încercat destul de multe feluri, până când a găsit numele deciziei una care trebuia să fie chiar în momentul.

Mai jos vă voi arăta 3 moduri de a întinde fundalul pe întregul ecran.

Prima metodă utilizează CSS3 pură. Totul vine de la proprietatea de fond-size. În cazul meu, voi întinde imaginea pe întregul ecran, adică, proprietăți adecvate pentru a tag-ul corpului. Puteți aplica după cum este necesar pentru a bloca, de exemplu.

Întinde întregul ecran va fi aici de această imagine cu o fată drăguță 🙂

Așa cum am stabilit cu o unitate comună care atribuie fișier stiluri și stilul de foaie atașează un bloc de date, următorul cod:

După cum puteți vedea în fundal adăuga un parametru calea către imaginea și setați poziția imaginii de pe ecran. În acest caz, centrul și partea de sus. Acest lucru înseamnă că imaginea va fi în centrul ecranului, și presat de echitatie sa la partea de sus a ecranului. Acest lucru este de a se asigura că nu este întotdeauna văzut fața fetei. Dacă vă place natura abstractă sau, în cazul în care puteți vedea cerul, câmpul, orizont, putem livra centrul de valoare și centru. În general, dacă sunteți familiarizați cu CSS, cred că va fi demontat. De asemenea, set fix. care captează imaginea.

Metoda este foarte simplu, l-am folosi întotdeauna și mi se potrivește la 100%. Există doar un singur lucru. browsere mai vechi nu sunt familiarizați cu CSS3, astfel încât cei care folosesc versiunea veche nu se va vedea un rezultat corect.

Această metodă folosește un CSS convențional. De fapt, prea simplu. Concluzii În corpul imaginii, atribuind ID site - bg:

Și prescrie stiluri:

poziționare fixă ​​și treceri se întinde pe întreaga ekran.Vot :) atât de simplu.

Au folosit jQuery. Prin urmare, trebuie mai întâi să includă biblioteca, în cazul în care nu este conectat înainte.

După conectarea script-ul bibliotecii, care va scala de fundal nostru

Mai mult, așa cum deja în a doua metodă, site-ul în organism, o imagine și atribuie un id, cum ar fi bg.

Iar la final vom adăuga stiluri pentru a face totul de lucru. Deschideți un fișier de stiluri și se adaugă următorul cod:

Prin stil se poate observa că am adăugat poziționare. În acest caz, acesta este fixat. Image în timp ce defilare vor rămâne fixe de fundal, dar în cazul în care schimbarea în poziționarea absolută. fundal poate fi defilat. Apropo, același lucru se poate face cu primele două metode.

De asemenea, parametrul specificat - z-index: -1. astfel încât imaginea a fost a textului. Dacă aveți un text care trebuie să fie în față, puteți elimina această opțiune.

Ce metodă de a utiliza, vă decideți. După cum sa menționat mai sus, eu sunt mai aproape de prima metodă. El este cel mai simplu și nu mai rău decât altele.

Asta e tot, vă mulțumesc pentru atenție. 🙂

Dacă ați fost utile pentru munca mea, vă poate sprijini site-ul dvs. :)

Bună ziua dragi prieteni

Ai instalat extensia AdBlock sau altele asemenea. Adaugă site-ul meu pe lista albă, și, astfel, vnesesh contribuie la dezvoltarea acesteia. Instrucțiuni despre cum să dezactivați AdBlock doriți această fereastră