→ Cum să întindeți fundalul astfel încât imaginea să se întinde pe toată lățimea blocului de ecran. Întindeți fundalul imaginii de la economii la o nouă proporție a obiectului melodiei Întindeți imaginea de fundal css

Cum să întindeți fundalul astfel încât imaginea să se întinde pe toată lățimea blocului de ecran. Întindeți fundalul imaginii de la economii la o nouă proporție a obiectului melodiei Întindeți imaginea de fundal css

Tehnologiile web, precum și diversele tendințe de design, nu stau în același loc, dar există câteva caracteristici și nuanțe originale pentru site-uri web. Una dintre aceste „direcții” este fundalul, care se întinde pe întregul ecran în lățime și înălțime. După cum a vrut soarta, cu cât am recunoscut-o mai mult, imaginea a fost plasată în antetul blogului și „tranziție” fără probleme în culoarea principală de fundal a paginii web. Puteți adăuga suplimentar pentru bagaj.

Plasarea ca fundal al unei imagini la scară mare este o activitate mult mai nouă și mai complexă, o soluție cunoscută acestui articol.

Lecția pentru această lecție este să plasați o imagine de fundal pe site, astfel încât să acopere treptat întregul fundal al ferestrei browserului. Ce trebuie să câștigi:

  • umpleți întreaga pagină cu o singură imagine fără spații;
  • modificați dimensiunea imaginii după cum este necesar (schimbați fereastra browserului);
  • salvarea proporțiilor imaginii;
  • remodelarea imaginii din centrul paginii;
  • de câte ori poți derula pe pagină;
  • soluție cross-browser care este potrivită pentru diferite browsere;
  • implementare fără tehnologii terțe, cum ar fi flash.

Ei bine, există o serie de soluții potrivite pentru fundalul site-ului pe întregul ecran.

Miraculos, soluție simplă și progresivă pentru CSS3 suplimentar

Pentru a implementa acest lucru, putem folosi puterea dimensiunii fundalului în CSS3. Să vikorizăm elementul html care se află în spatele corpului. Să setăm fixarea și centrarea fundalului, după care vom modifica valoarea mărimii fundalului a copertei.

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

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; )

Decizia este de a susține toate cele mai populare evenimente:

  • Firefox 3.6+ (Firefox 4 acceptă versiunea prefixată fără furnizor)
  • Opera 10+ (Opera 9.5 acceptă dimensiunea fundalului fără a însemna acoperire)
  • Chrome Whatever+
  • IE 9+
  • Safari 3+

Goltzman cunoaște soluția care vă permite să utilizați hack-uri în IE

filtru : progid: DXImageTransform.Microsoft .AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: „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"");

Buna ziua! În acest caz, pot apărea probleme cu lucrarea trimisă pe site. Inainte de a vorbi, ceva mai tarziu Matt Litherland a adaugat ca codul, in principiu, poate fi modificat, dar pentru care nu se pot crea elemente html sau body, dar este necesar sa se implementeze totul prin div-uri cu inaltime si latime 100%.

CSS-hack numărul 1

Doug Neiner oferă o versiune alternativă. Ce tip de vikorist este folosit pentru a crea un element pe lateral? , căruia îi puteți modifica dimensiunea în orice browser. Setăm valoarea min-height, care umple fereastra browserului pe verticală și setăm lățimea la 100%, care umple pagina orizontal. De asemenea, setăm lățimea minimă, astfel încât imaginea să nu fie mai mică, ceea ce este adevărat.

img.bg ( /* Setează reguli pentru a umple fundalul */ inaltime minima: 100%; lățime minimă: 1024px; /* Configurați scalarea proporțională */ latime: 100%; inaltime: auto; /* Configurați poziționarea */ poziție: fixă; sus: 0; stânga: 0; ) Ecran @media și (lățime maximă: 1024px ) ( /* Specific acestei imagini particulare */ img.bg ( stânga: 50%; margine-stânga: -512px; /* 50% */ ) )

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; /* 50% */ ) )

Funcționează în toate versiunile browserelor populare - Safari / Opera / Firefox și Chrome. Pentru IE, are întotdeauna propriile sale nuanțe:

  • IE 9 - praciuє;
  • IE 7/8 - cel mai adesea funcționează corect, dar nu centrează imaginea mai mic decât fereastra browserului;
  • IE 6 poate fi ajustat dacă cineva dorește să folosească acest browser.

CSS-Hack opțiunea 2

O altă opțiune pentru sarcina finală pentru ajutor Stiluri CSS Așezați imaginea creată pe partea cu o poziție fixă ​​în coșul din stânga sus, apoi setați valorile lățimii minime și înălțimii minime 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ție: absolut; sus: 0; stânga: 0; dreapta:: jos : 0 ; marjă : automat ; lățime minimă : 50 % ; înălțime minimă : 50 % ; )

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

Cum să o facă:

  • Safari / Chrome / Firefox (înainte versiuni timpurii nu a fost testat, dar restul funcționează bine)
  • IE 8+
  • Opera (indiferent de versiune) și în același timp cu IE ambele este ofensator să glitchezi, dar cu o poziționare blândă.

Metoda jQuery

Această opțiune este foarte ușoară (din punct de vedere CSS) deoarece știm că randarea părților laterale ale imaginii (img este redată ca întreg) este mai mult sau mai mică decât fluxul ferestrei browserului. Dacă este mai mică, atunci putem selecta doar lățime = 100% și în acest caz lățimea și înălțimea ferestrei vor fi totuși umplute. În plus, puteți specifica doar înălțimea = 100% pentru a umple întreaga fereastră.

Accesul la toate datele este asigurat prin JavaScript, folosind următoarele coduri:

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

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

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$(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 trebuie efectuată în acest caz (din câte am înțeles), altfel se poate face. Acceptă majoritatea browserelor desktop, inclusiv IE7+. În cele din urmă, autorul articolului despre hack-uri a pregătit un set de fișiere de aplicație, în care totul este implementat - puteți încânta. Comentariile la articolul original conțin și informații și discuții, deși autorul a adăugat mai multe detalii importante sub formă de acțiuni înainte de postare și în meniu este și acesta transferat și indicat. Desigur, contactați pe cineva pentru ajutor și ajutor. Apropo, dacă nu ar exista „glume” constante în IE7, toate puzzle-urile ar fi perfecte.

P.S. Ai de gând să cumperi o carte? — nu trebuie să mergeți la magazin dintr-o dată; librăria online vă permite să faceți totul printr-un proces - selectați, plătiți și aranjați livrarea la domiciliu.

Eu zbor. În acest articol, vreau să vă spun despre trei moduri de a plasa o imagine ca fundal al unei pagini întregi folosind doar HTML + CSS (fără niciun JS).

Deci, iată opțiunile pentru imaginea de fundal:

  • 100% din lățimea și înălțimea paginii este acoperită
  • Fundalul este scalat în funcție de nevoi (fondul este întins sau comprimat în funcție de dimensiunea ecranului)
  • Raportul de aspect al imaginii este păstrat
  • Imaginea este centrată pe pagină
  • Fundalul nu face clic la derulare
  • Soluția este cât se poate de cross-browser
  • Nu utilizați alte tehnologii decât CSS

Metoda 1

După părerea mea, este cea mai scurtă metodă chiar și cel mai simplu, laconic și practic. Acest lucru se datorează puterii CSS3 background-size, pe care o punem în eticheta html. HTML-ul în sine, dar nu și corpul, pentru că Înălțimea sa este mai mare sau mai veche decât înălțimea ferestrei browserului.

Setăm fixarea și centrarea fundalului, apoi reglam dimensiunea acestuia folosind background-size: cover .

Html (imagine de fundal: url(images/background.jpg); background-repeat: nu-repeat; fundal-poziție: centru centru; fundal-attachment: fix; dimensiune: coperta; -o-background-size: coperta; fundal -dimensiune: coperta; )

Această metodă funcționează în

Chrome (indiferent de versiunea) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Pentru ca imaginile tale să fie apreciate de toată lumea, găzduiește-ți site-urile numai la furnizori de găzduire de renume, de exemplu, Koristuvach sisteme de sunet iubesc site-urile suedeze

Metoda 2

Această metodă transferă un element img indirect, a cărui dimensiune variază în funcție de dimensiunea ferestrei browserului. Pentru a întinde imaginea pe întregul ecran, trebuie să setați înălțimea minimă și lățimea la 100%. Și pentru ca imaginea să nu fie comprimată la o dimensiune mai mică decât cea originală, setați lățimea minimă la valori egale cu lățimea imaginii.

Dacă lățimea ferestrei este mai mică decât lățimea imaginii, interogarea media va fi folosită pentru a alinia fundalul în centru.

img.background ( înălțime minimă: 100%; lățime minimă: 640px; lățime: 100%; înălțime: automat; poziție: fix; sus: 0; stânga: 0; /* Setați la dimensiunea imaginii */ @media ecran și (lățime maximă: 640 px)( img.bg ( stânga: 50%; margine-stânga: -320px; ) ) )

Această metodă funcționează în:

  • Orice versiune de browsere bune (Chrome, Opera, Firefox, Safari)
  • IE 9+

Metoda 3

O altă metodă este utilă: fixarea imaginii în colțul din stânga sus al părții laterale și extindeți-l folosind puterile suplimentare de lățime minimă și înălțime minimă 100%, salvând astfel părțile laterale.

Cu toate acestea, cu această abordare imaginea nu este centrată. Ei bine, această problemă apare în gâtul imaginii în

, de care ne cerem de 2 ori mai mult pentru dimensiunea ferestrei. Și imaginile în sine sunt întinse și plasate în centru.

div.background ( poziție: fix; sus: -50%; stânga: -50%; lățime: 200%; înălțime: 200%; ) img ( poziție: absolut; sus: 0; stânga: 0; dreapta: 0; jos : 0; marjă: automată; lățime minimă: 50%; înălțime minimă: 50%;

Această metodă funcționează în browsere buneși IE 8+.

Sper că aceste informații vă vor fi de folos. Folosesc mai ales aceste metode, mai ales primele. Există și alte moduri de a plasa imagini pe spate când Ajutor CSS. Dacă știți despre ele, vă rugăm să vă împărtășiți comentariile.

După ce am arătat această lecție pe unul canale youtube. Un truc foarte tare pentru un web designer, după părerea mea.

Cu toate acestea, lățimea imaginii originale nu este suficientă pentru orice idee de design, deoarece întinderea lățimii îndeplinește obiectele necesare. Pentru a vă păstra obiectele intacte și pentru a întinde fundalul imaginii, PhotoShop ne pune la dispoziție instrumente speciale. Și așa, iată-l din imaginea originală:

Vă rugăm să introduceți axa:

Să începem. Deschidem imaginea noastră în PhotoShop și vedem obiectul de care avem nevoie:


Apoi accesați fila Vidilenya >> Salvați regiunea Vidylennya


Specific orice nume mai potrivit pentru această vizualizare:


În acest fel, am creat zona ca și cum ar fi protejată de schimbare. Să facem un pas înainte și să trecem în Editare >> Scalare cu armonizare împreună:


Indică clar obiectul care este protejat:


Asta este. Este imposibil să schimbați lățimea imaginii folosind instrumente standard (sau în panoul de sus puteți modifica procentul de lățime sau pur și simplu trageți imaginea). ImportantÎnainte de a face acest lucru (sau în etapa inițială), modificați dimensiunea pânzei, astfel încât imaginile dintre ele să nu depășească zona dvs. de vizibilitate.

Aici o vom rezolva mai detaliat. Cum poți crea un fundal pentru o resursă de internet care poate acoperi întreg spațiul de lucru? Practic, toată lumea este timidă CSS3 Puteți include, de asemenea, jQuery și PHP, dar să ne uităm la o opțiune, care este CSS pur. Pentru a începe, trebuie să înțelegeți și să înțelegeți ce poate ieși. Aceasta este o umplere incredibilă, completă a ferestrei cu cenușă sau imagini, astfel încât să nu existe luminițe goale.

Să întindem imaginea astfel încât să pară corect, deoarece fundalul vine într-o singură culoare, este mai ușor să lucrezi cu ea. Nu uitați de consistența imaginii în această proporție. Este ușor de văzut că imaginea este centrată. În plus, totul este cât se poate de cross-browser și inteligent, fără nicio manipulare flash.

Metoda de fundal CSS3

Aceasta este cea mai extinsă metodă prin care puteți întinde fundalul pe o curățare CSS, și toate sunt de aceeași putere, sub numele dimensiunea fundalului Ceea ce va fi prezent doar în CSS3.

Aici fixăm mai întâi fundalul și îl plasăm în centru, astfel încât să nu fie nevoie să-l întindem prea mult, inclusiv puterea dimensiunii fundalului, și totul trece pe fundal.

În orientarea legală a blocului căruia sunt atribuite stiluri și adăugate la fișierul de stil pentru acel bloc, următorul cod este:

corp(
fundal: url(http://site/Aben/ABGDA/artunsa.png) nu-repeat centru sus fix;
-webkit-background-size: coperta;
-Dimensiune-fond-Moz: coperta;
-o-background-size: coperta;
dimensiunea fundalului: coperta;
}


Cum puteți observa că parametrul fundal, unde veți merge acum la imagine, unde veți putea seta poziția imaginii în conformitate cu fereastra de pe ecran. Cum să o rezolvi, apoi sensul centru Iar sus reprezintă centrul și apăsarea din toate părțile, din partea de jos a poienișului. Dacă a devenit clar, atunci sensul fix- Indică funcția de blocare.

Metoda este și mai simplă, astfel încât stagnarea este întotdeauna redusă cu 100% din umiditate.

Altă cale :

O altă modalitate simplă de a implementa o melodie este să inserați o imagine pe lateral. Acesta va fi într-o poziție fixă ​​și va fi plasat în colțul din stânga sus. Avem nevoie ca lățimea minimă și înălțimea minimă să fie de 100%. De asemenea, este necesar să pregătiți imaginea în prealabil, în ceea ce privește proporțiile laturilor.

#site-ul web (
poziție:fixă;
sus:0;
stânga:0;
lățime minimă: 100%;
inaltime minima: 100%;
}


Aici puteți observa că acest cod nu centrează imaginea de fundal, așa că puteți face rapid totul după cum este necesar, sau mai degrabă, reparați imaginea luând-o în div.


.jpg" alt="">


CSS

#site-ul web (
poziție:fixă;
sus: -50%;
stânga: -50%;
latime:200%;
inaltime:200%;
}
#site img (
poziție: absolut;
sus:0;
stânga:0;
dreapta:0;
jos:0;
margin:auto;
lățime min: 50%;
inaltime minima: 50%;
}


Prin urmare, nu toate metodele sunt prezentate aici, ci cele care sunt cel mai probabil să se schimbe.

De asemenea, un scurt videoclip, în care totul este clar pentru a explica cum să utilizați CSS pentru a întinde fundalul pe întregul ecran.

PS- pentru că ai propriul tău mod de a face lucrurile, deși s-ar putea să fie încă o problemă aici. Atunci vă rugăm să împărtășiți cu ei în comentarii.

Îmi amintesc că am trecut prin multe informații și am încercat multe metode până când am știut chiar soluția de care era nevoie în acel moment.

Mai jos voi arăta trei moduri de a întinde fundalul pe toată lățimea ecranului.

Metoda nr. 1

Prima metodă este pură CSS3. Toată lumea iese ca șefi ai puterii dimensiunea fundalului. La alegerea mea, voi face o poză extensibilă care să umple toată lățimea ecranului, astfel încât să aduc autoritățile la etichetă corp. Te poți opri la bloc pentru nevoile tale, de exemplu.

Să extindem această poză cu o fată drăguță pe tot ecranul :)

Titlul este atribuit blocului căruia îi este atribuit stilul și se adaugă la fișierul de stil pentru acest bloc, următorul cod:

Corp (fundal: url(images/bg.jpg)) sus necentrat fixat; -webkit-background-size: coperta; acoperi; )

De unde stii tu, la parametri fundal Puteți accesa imaginea și puteți seta poziția imaginii pe ecran. Vipadka noastră are centru și vârf. Aceasta înseamnă că imaginea va fi în centrul ecranului și va apăsa cu partea superioară în partea de sus a ecranului. Asta pentru ca identitatea fetei să poată fi văzută din când în când. Dacă aveți, de exemplu, un fundal abstract sau o natură, unde puteți vedea cerul, câmpul, orizont, puteți seta valorile centru și centru. Dacă știi CSS, cred că o să-ți dai seama. Valoarea este de asemenea setată fix, care surprinde imaginea.

Metoda este și mai simplă, o folosesc tot timpul și este 100% mai puțin puternică. Încă un lucru. Browserele vechi care nu sunt familiarizate cu CSS3, cei care folosesc versiuni mai vechi pot să nu obțină aceleași rezultate.

Metoda nr. 2

Această metodă se bazează pe CSS standard. În esență, este simplu. Imagini afișate pe site prin introducerea id-ului - bg:

Precizez stiluri:

#bg (poziție:fixă; indicele z: -1; sus:0; stânga:0; lățime minimă:100%; înălțime minimă:100%; )

Poziția este fixă ​​și se extinde pe tot ecranul. Axa este atât de simplă :).

Metoda nr. 3

Stagnează aici jQuery. Acum va trebui să conectați biblioteca dacă nu a fost conectată înainte.

După bibliotecă conectăm un script care este scalabil la corpul nostru

Și în sfârșit adăugăm stiluri, astfel încât totul să funcționeze. Deschideți fișierul de stil și adăugați următorul cod:

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

În spatele stilurilor puteți vedea ce am adăugat la poziționare. U la acest tip acest fix. Când sunt derulate, imaginile nu vor mai avea un fundal fix dacă schimbați poziția în absolut, apoi fundalul poate fi derulat. Înainte de a vorbi, poți să o faci singur în primele două moduri.

Parametrul este de asemenea specificat - indicele z: -1, astfel încât imaginea să fie în spatele textului. Dacă nu aveți niciun text care apare în față, puteți selecta acest parametru.

Ce mod de a vikorystati, virishuvati pentru tine. După cum am scris Vishche, sunt cea mai apropiată primă metodă. El este cel mai simplu și nu se întristează pentru alții.

Asta e tot de dragul respectului. 🙂

 

 
Tse tsikavo: