Controlul dimensiunii imaginii de fundal folosind css. Imagini de fundal receptive

Rezoluția monitoarelor este în continuă creștere și atunci când amenajăm pagini web trebuie să luăm în considerare cea mai largă gamă de rezoluții. Acest lucru este deosebit de important atunci când se utilizează imagine de fundal, care fie este întreruptă atunci când rezoluția monitorului este scăzută, fie, dimpotrivă, nu se potrivește în întregime când rezoluție înaltă. O soluție pentru această situație este să scalați fundalul. Desigur, acest lucru promite unele probleme, cum ar fi apariția distorsiunilor și artefactelor în imagini, dar extinde și arsenalul de instrumente de aspect.

Mărimea este controlată de proprietatea background-size, valoarea poate fi specificată cuvânt cheie cover , atunci dimensiunea imaginii va fi astfel încât lățimea și înălțimea acesteia să se potrivească în zona specificată (de exemplu, o fereastră de pagină web); Cuvântul cheie conţine scala imaginea astfel încât cel puţin o parte a imaginii să se potrivească în întregime în zona specificată. În plus, este acceptabilă indicarea dimensiunilor orizontale sau verticale explicite în procente sau altele unități CSS. În fig. 1 arată modificarea dimensiunilor imaginii când sensuri diferite dimensiunea fundalului. Gri este selectat un bloc de 280x200 pixeli, în interiorul căruia este setat fundalul.

Orez. 1. Tipul imaginilor de fundal în funcție de valoarea mărimii fundalului

Dacă sunt specificate două valori de dimensiune separate printr-un spațiu, atunci prima valoare determină lățimea orizontală, iar a doua determină lățimea verticală. În acest caz, proporțiile sunt ignorate, ceea ce este clar vizibil în Fig. 1 an În loc de una dintre dimensiuni, este permisă utilizarea cuvântului cheie auto , apoi browserul îl calculează automat pe baza proporțiilor imaginii.

Exemplul 1 setează o fotografie de fundal care ocupă întreaga fereastră a browserului.

Exemplul 1. Imagine de fundal

Rezultat acest exemplu prezentată în fig. 2. Pe măsură ce redimensionați fereastra, fotografia va crește sau se va micșora pentru a umple întreaga pagină web.

Traducere: Vlad Merzhevich

În CSS 2.1, o imagine de fundal aplicată unui container își păstrează dimensiuni fixe. Din fericire, CSS3 a introdus proprietatea background-size, care permite ca fundalul să fie întins sau comprimat. Este ideal dacă creați un șablon de design web receptiv.

Există mai multe moduri de a defini dimensiunile - aruncați o privire la pagina demonstrativă a dimensiunii de fundal.

Redimensionare absolută

Se pot aplica unități de măsură.

Dimensiune fundal: latime-inaltime;

În mod implicit, lățimea și înălțimea sunt setate la automat , ceea ce pleacă dimensiunile originale imagini.

Poți să întrebi dimensiune nouă imagini folosind unități absolute măsurători precum px, em, cm etc. Proporțiile se vor schimba dacă este necesar. De exemplu, dacă imaginea noastră de fundal are dimensiuni de 200x200 pixeli, atunci următorul cod va lăsa această înălțime, dar va face lățimea la jumătate la fel de mare:

Dimensiune fundal: 100px 200px;

Dacă este specificată o singură valoare, aceasta este considerată lățimea. Înălțimea este setată la automat și proporțiile sunt păstrate:

Dimensiune fundal: 100px;

/* similar */ background-size: 100px automat;

Acest cod scalează imaginea de la 200x200 la 100x100 pixeli.

Modificare relativă a mărimii prin procente

Dacă se aplică procente, dimensiunile se bazează pe element și NU pe imagine:

Dimensiune fundal: 50% automat;

Lățimea imaginii de fundal depinde astfel de dimensiunile containerului. Dacă containerul are o lățime de 500px, atunci dimensiunea imaginii noastre va fi redusă la 250x250. Utilizarea procentelor poate fi utilă pentru design adaptiv

. Schimbați lățimea paginii demo pentru a vedea cum se modifică dimensiunile.

Scalare la dimensiunea maximă

Proprietatea background-size înțelege, de asemenea, cuvântul cheie contain. Scala imaginea astfel încât să umple recipientul. Cu alte cuvinte, imaginea va crește sau se va micșora proporțional, dar lățimea și înălțimea nu vor depăși dimensiunile containerului:

Mărimea fundalului: conține;

Umpleți cu fundal

Proprietatea background-size înțelege, de asemenea, cuvântul cheie cover. Imaginea va fi scalată pentru a umple întregul container, dar dacă raporturile de aspect sunt diferite, imaginea va fi decupată.

Dimensiune fundal: coperta;

Scalare mai multe fundaluri

Mai multe fundaluri pot fi scalate folosind o listă de valori separate prin virgulă, în aceeași ordine.

Fundal: url("oaie.png") 60% 90% fără repetare, url("oaie.png") 40% 50% fără repetare, url("oaie.png") 10% 20% fără repetare # 393;

dimensiunea fundalului: 240px 210px, automat, 150px;

Lucrul în browsere Cele mai recente versiuni ale tuturor browserelor acceptă dimensiunea fundalului fără prefixe. IE8 și mai jos nu acceptă această proprietate. Puteți folosi un filtru IE pentru a emula conținutul și valorile de copertă, dar este imposibil să redimensionați imaginea de fundal fără a folosi trucuri precum adăugarea

Rezoluția monitoarelor este în continuă creștere și atunci când amenajăm pagini web trebuie să luăm în considerare cea mai largă gamă de rezoluții. Acest lucru este deosebit de important atunci când utilizați o imagine de fundal, care fie este tăiată la o rezoluție scăzută a monitorului, fie, dimpotrivă, nu se potrivește în întregime la o rezoluție ridicată. O soluție pentru această situație este să scalați fundalul. Desigur, acest lucru promite unele probleme, cum ar fi apariția distorsiunilor și artefactelor în imagini, dar extinde și arsenalul de instrumente de aspect.

Proprietatea background-size este responsabilă pentru controlul dimensiunii cuvântul cheie cover poate fi specificat ca valoare, apoi dimensiunea imaginii va fi astfel încât lățimea și înălțimea acesteia să se potrivească în zona specificată (de exemplu, o fereastră de pagină web); Cuvântul cheie conţine scala imaginea astfel încât cel puţin o parte a imaginii să se potrivească în întregime în zona specificată. De asemenea, este acceptabil să furnizați dimensiuni orizontale sau verticale explicite în procente sau alte unități CSS. În fig. Figura 1 arată modul în care imaginile își schimbă dimensiunea pentru diferite valori de dimensiune de fundal. Un bloc de 280x200 pixeli este evidențiat cu gri, în interiorul căruia este setat fundalul.

Orez. 1. Tipul imaginilor de fundal în funcție de valoarea mărimii fundalului

Dacă sunt specificate două valori de dimensiune separate printr-un spațiu, atunci prima valoare determină lățimea orizontală, iar a doua determină lățimea verticală. În acest caz, proporțiile sunt ignorate, ceea ce este clar vizibil în Fig. 1 an În loc de una dintre dimensiuni, este permisă utilizarea cuvântului cheie auto , apoi browserul îl calculează automat pe baza proporțiilor imaginii.

Exemplul 1 setează o fotografie de fundal care ocupă întreaga fereastră a browserului. Pentru a face acest lucru, a trebuit să setez înălțimea html și a corpului la 100%.

Exemplul 1. Imagine de fundal

HTML5 CSS3 IE 9+ Cr Op Sa 5 Fx

Fundalul include și un gradient, care poate fi și scalat, obținând astfel o varietate de efecte. De exemplu, adăugarea dimensiunii de fundal la gradient liniar, îl vom face să se repete, ceea ce formează dungi gradiente alternante (exemplul 2).

Exemplul 2. Dungi verticale

Rezultatul exemplului este prezentat în Fig. 2.

Orez. 2. Dungi gradient verticale

Dungile verticale și orizontale pot fi realizate nu numai cu degrade, ci și cu margini clare. Pentru a face acest lucru, trebuie să specificați patru culori în parametrii de gradient - de la 0 la 50% culoarea primei dungi și de la 50% la 100% culoarea celei de-a doua dungi. Nu trebuie să scrieți prima culoare cu 0% și ultima culoare cu 100%, acestea sunt adăugate automat de browser, așa că ne vom limita la doar două valori. Exemplul 3 arată cum se creează dungi orizontale 50 de pixeli înălțime.

Exemplul 3: dungi orizontale

HTML5 CSS3 IE 10+ Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Dungi orizontale

Deoarece puteți adăuga mai multe fundaluri în același timp, listând parametrii lor separați prin virgule, același lucru se poate face cu degrade. Doar una dintre culori ar trebui să fie translucidă, altfel gradienții se vor suprapune. Exemplul 4 folosește două degrade pentru fundalul paginii web, intersectându-se în unghi drept, care combinate cu dimensiunea fundalului creează celule.

Exemplul 4. Două degrade

HTML5 CSS3 IE Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 4.

Orez. 4. Celulele

Combinația dintre un gradient și proprietatea dimensiunea fundalului vă permite să obțineți o mare varietate de umpleri de fundal create fără a utiliza imagini de fundal.

Tehnologiile web, precum diversele tendințe de design, nu stau pe loc, așa că de fiecare dată apar câteva caracteristici și nuanțe originale pentru site-uri web. Una dintre aceste „direcții” este utilizarea unui fundal (backgorund), care se întinde pe întregul ecran în lățime și înălțime. Am spus ceva de genul în urmă cu un an sau mai mult - imaginea a fost plasată în antetul blogului și „tranziție” fără probleme în principal culoarea de fundal pagini web. Dacă doriți, puteți chiar să adăugați .

Plasarea unei imagini mari scalabile ca fundal este ceva nou si mai complex, solutia la care am gasit-o in acest articol.

Ţintă această lecție postați pe site imagine de fundal, care ar acoperi permanent întregul fundal al ferestrei browserului. Ce trebuie făcut exact:

• umpleți întreaga pagină cu o singură imagine fără spații;
• redimensionarea imaginii dacă este necesar (reducerea ferestrei browser);
• menținerea proporțiilor imaginii;
• poziționarea imaginii în centrul paginii;
• lipsa barelor de defilare pe pagină;
• soluție cross-browser potrivită pentru diferite browsere;
• implementare fără tehnologii terțe, cum ar fi flash.

Deci, există mai multe soluții potrivite pentru un fundal de site pe ecran complet.

O soluție minunată, simplă și progresivă folosind CSS3

Pentru a îndeplini această sarcină, putem folosi proprietatea background-size din CSS3. Vom folosi un element html care este mai bun decât body. Să setăm fundalul să fie fix și centrat, apoi folosim capacul valorii în dimensiunea fundalului.

html ( fundal: url(images/bg.jpg) centru central fără repetare fixat; -webkit-background-size: coperta; -moz-background-size: coperta; -o-background-size: coperta; dimensiunea fundal: acoperi)

Soluția este susținută de aproape toate cele populare de pe Internet:

• Firefox 3.6+ (Firefox 4 acceptă versiunea prefixată fără furnizor)
• Opera 10+ (Opera 9.5 acceptă dimensiunea fundalului, dar fără valoarea copertei)
• Chrome Whatever+
• IE 9+
• Safari 3+

Un anume Goltzman a găsit o soluție care permite hack-ului să funcționeze în IE

„progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")"

filtru: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale""); Dar atentie!!! acest lucru poate cauza unele probleme cu linkurile de pe pagină. Apropo, puțin mai târziu, Matt Litherland a adăugat că codul, în principiu, poate fi folosit, dar nu poate fi folosit pentru asta. elemente html

sau body, dar trebuie să implementați totul printr-un div cu 100% înălțime și lățime.CSS

-hack numărul 1 O versiune alternativă este prezentată de Doug Neiner. În acest caz, se folosește un element încorporat în pagină

img.bg ( /* Setați reguli pentru a umple fundalul */ înălțime minimă: 100%; lățime minimă: 1024px; /* Setați scalarea proporțională */ lățime: 100%; înălțime: automată; /* Configurați poziționarea */ poziție: fix sus: 0; stânga: 0 ) @media ecran și (max-width: 1024px) ( /* Specific pentru această imagine particulară */ img.bg ( stânga: 50%; margin-left: -512px; / * 50% */ ) )

Funcționează în orice versiune browsere de calitate- Safari / Opera / Firefox și Chrome. Ca întotdeauna, IE are propriile sale nuanțe:

• IE 9 - lucrări;
• IE 7/8 - cel mai adesea funcționează corect, dar nu centrează imaginile mai mici decât fereastra browserului;
• IE 6 - poate fi personalizat, dar cine are nevoie oricum de acest browser.

sau body, dar trebuie să implementați totul printr-un div cu 100% înălțime și lățime.-hack opțiunea 2

O altă opțiune pentru rezolvarea problemei folosind Stiluri CSS este să plasați o imagine în linie pe pagină cu o poziție fixă ​​în stânga colțul de sus, apoi setați lățimea minimă și înălțimea minimă la 100%, păstrând proporțiile.

#bg ( poziție:fix; sus:-50%; stânga:-50%; lățime:200%; înălțime:200%; ) #bg img (poziția:absolut; sus:0; stânga:0; dreapta:0; jos: 0; lățime minimă: 50%;

Hackul funcționează în:

• Safari / Chrome / Firefox (de asemenea versiuni timpurii nu a fost testat, dar funcționează bine în cele mai recente)
• IE 8+
• Opera (orice versiune) și împreună cu IE ambele sunt bugate în același mod cu o eroare de poziționare.

Metoda cu jQuery

Această opțiune este mult mai ușoară (din punct de vedere CSS) dacă știm că raportul de aspect al imaginii (img folosit ca fundal) este mai mare sau mai mic decât raportul de aspect actual al ferestrei browserului. Dacă este mai mică, atunci putem folosi doar lățime = 100% și fereastra va fi umplută în mod egal în lățime și înălțime. Dacă este mai mult, puteți specifica doar înălțimea = 100% pentru a umple întreaga fereastră.

Toate datele sunt accesate prin JavaScript, codurile folosite sunt următoarele:

#bg ( poziție: fix; sus: 0; stânga: 0; ) .bgwidth ( lățime: 100%; ) .bgheight ( înălțime: 100%; )

$(window).load(function() (var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() ( dacă ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

După părerea mea, centrarea nu se realizează în acest caz (din câte am înțeles), dar se poate face. Cele mai multe browsere desktop sunt acceptate, inclusiv IE7+. În cele din urmă, autorul articolului despre hack-uri a pregătit un set de fișiere exemplu în care toate acestea sunt implementate - îl puteți descărca. Comentariile la articolul original conțin și unele informații și discuții, deși autorul a adăugat cele mai multe detalii importante sub formă de drepturi la postare și le am și traduse și indicate. Desigur, exemplele vă vor ajuta să înțelegeți toate acestea. În general, dacă nu ar fi „gag-urile” constante de la IE7, toate hack-urile menționate ar fi ideale.

P.S. Vrei să cumperi o carte? - nu trebuie să mergeți la magazin pentru că acum o librărie online vă permite să faceți totul online - alegeți, plătiți și aranjați livrarea la domiciliu.