Uitați-vă la site-urile web populare astăzi și un tratament de design pe care sunteți sigur că îl veți vedea este imagini de fundal mari, care se întind pe ecran. Una dintre provocările prin adăugarea acestor imagini provine din cele mai bune practici conform cărora site-urile web trebuie să răspundă la diferite dimensiuni și dispozitive de ecran - o abordare cunoscută sub numele de design web receptiv.
O imagine pentru multe ecrane
Întrucât aspectul site-ului dvs. web se modifică și se modifică cu dimensiuni diferite ale ecranului, la fel și aceste imagini de fundal trebuie să își mărească dimensiunea în mod corespunzător. De fapt, aceste „imagini fluide” sunt una dintre piesele cheie ale site-urilor web receptive (împreună cu o rețea fluidă și interogări media). Aceste trei piese au reprezentat un element esențial al designului web receptiv de la început, dar, deși a fost întotdeauna destul de ușor să adăugați un sistem de reacție imagini inline către un site (imaginile inline sunt graficele care sunt codificate ca parte a marcajului HTML), procedând la fel cu imaginile de fundal (care sunt concepute în pagină folosind proprietăți de fundal CSS) a oferit de multă vreme o provocare semnificativă pentru mulți designeri web și front-end dezvoltatori. Din fericire, adăugarea proprietății „background-size” în CSS a făcut acest lucru posibil.
Într-un articol separat, am prezentat modul de utilizare a Proprietatea CSS3 fundal-dimensiune pentru a întinde imagini pentru a se potrivi într-o fereastră, dar există o modalitate și mai bună și mai utilă de implementare pentru această proprietate. Pentru a face acest lucru, vom utiliza următoarea combinație de proprietăți și valori:
fundal-dimensiune: coperta;
Proprietatea cuvântului cheie de acoperire îi spune browserului să redimensioneze imaginea pentru a se potrivi ferestrei, indiferent de cât de mare sau mică este fereastra respectivă. Imaginea este redimensionată pentru a acoperi întregul ecran, dar proporțiile originale și raportul de aspect sunt păstrate intacte, împiedicând distorsionarea imaginii în sine. Imaginea este plasată în fereastră cât mai mare posibil, astfel încât întreaga suprafață a ferestrei să fie acoperită. Aceasta înseamnă că nu veți avea pete goale în pagina dvs. sau vreo distorsiune a imaginii, dar și ea înseamnă că o parte din imagine poate fi tăiată în funcție de raportul de aspect al ecranului și de imaginea din întrebare. De exemplu, marginile unei imagini (fie sus, jos, stânga sau dreapta) pot fi tăiate pe imagini, în funcție de valorile pe care le utilizați pentru proprietatea poziție de fundal. Dacă orientați fundalul spre „stânga sus”, orice exces de pe imagine se va desprinde din partea de jos și din dreapta. Dacă centrați imaginea de fundal, excesul se va desprinde din toate părțile, dar din moment ce excesul este răspândit, impactul asupra oricărei părți va fi mai puțin servit.
Cum se folosește „background-size: cover;”
Când creați imaginea de fundal, este o idee bună să creați o imagine destul de mare. În timp ce browserele pot micșora o imagine fără a avea un impact vizibil asupra calității vizuale, atunci când un browser mărește un imagine la o dimensiune mai mare decât dimensiunile originale, calitatea vizuală va fi degradată, devenind neclară și pixelat. Dezavantajul este că pagina dvs. are o performanță puternică atunci când livrați imagini uriașe pe toate ecranele. Când faceți acest lucru, asigurați-vă că faceți corect pregătiți aceste imagini pentru viteza de descărcare și livrarea web. În cele din urmă, trebuie să găsiți mediul fericit între o dimensiune și o calitate a imaginii suficient de mari și o dimensiune rezonabilă a fișierului pentru viteze de descărcare.
Una dintre modalitățile obișnuite de utilizare a scalării imaginilor de fundal este atunci când doriți ca acea imagine să ocupe fundalul complet al unei pagini, dacă pagina respectivă este largă și este vizualizată pe un computer desktop sau mult mai mică și este trimisă către un dispozitiv portabil, mobil dispozitive.
Încărcați imaginea pe gazda dvs. web și adăugați-o la CSS ca imagine de fundal:
imagine de fundal: url (fireworks-over-wdw.jpg);
background-repeat: no-repeat;
fundal-poziție: centru centru;
background-attachment: fix;
Adăugați mai întâi CSS prefixat de browser:
-webkit-background-size: coperta;
-moz-background-size: coperta;
-o-background-size: coperta;
Apoi adăugați proprietatea CSS:
fundal-dimensiune: coperta;
Utilizarea diferitelor imagini care se potrivesc dispozitivelor variate
În timp ce designul receptiv pentru desktop sau laptop este important, varietatea de dispozitive care poate accesa web-ul a crescut semnificativ și vine cu o varietate mai mare de dimensiuni de ecran acea.
Așa cum am menționat anterior, încărcarea unei imagini de fundal receptive foarte mari pe un smartphone, de exemplu, nu este un design eficient sau conștient de lățime de bandă.
Aflați cum puteți utiliza interogări media pentru a difuza imagini care vor fi adecvate dispozitivelor pe care vor fi afișate și pentru a îmbunătăți și mai mult compatibilitatea site-ului dvs. web cu dispozitivele mobile.