Përshëndetje. Sot ne e konsiderojmë se si mund të zgjasni sfondin e CSS me mjetet (pa ndërhyrje në mjete të tjera, të tilla si JavaScript dhe të tjerët si ata).

Stretch Sfondi CSS Tools është bërë e mundur me shfaqjen e CSS3, në mënyrë specifike duke përdorur pronën e madhësisë së sfondit. Duhet të thuhet se kjo pronë punon shumë më mirë se zgjidhjet e ngjashme për JavaScript (të cilat janë përdorur para shfaqjes së madhësisë së sfondit), si më të shpejtë dhe në mënyrë adekuate reagon në ndryshimin e madhësisë së shfletuesit, më shpejt zbut një pamje të shtrirë dhe si ata Dashur të fliste në fillim të vitit 2000 x, "do të punojë edhe me JavaScript me aftësi të kufizuara".

Zgjidhja: Si të shtrihesh mjetet e sfondit CSS

Pronat e sfondit të madhësisë mund të kenë disa vlera.
1) Mund të jetë një nga direktivat: mbulim ose përmbajtje.

Madhësia e sfondit: përmbajnë; / * Peshon imazhin duke ruajtur proporcione në mënyrë që la carte e të gjithë të përshtatet në bllok. * / Madhësia e sfondit: Mbulimi; / * Peshon imazhin duke ruajtur proporcione në mënyrë që gjerësia ose lartësia e saj të jetë e barabartë me gjerësinë ose lartësinë e njësisë. * /

2) Këto mund të jenë përqindje (100% ose 94% të gjerësisë së kontejnerit). Në këtë rast, ju mund të përdorni të dy vlera në përqindje dhe 2. nëse vlerat janë 2, atëherë lartësia dhe gjerësia e figurës do të shkallëzohen dhe secila nga vlerat është rregulluar në proporcion me përqindjet e specifikuara në parametrat).

Madhësia e sfondit: 100%; / * Mbulesa ekuivalente e Direktivës * / Madhësia e sfondit: 100% 50%; / * Gjerësia do të jetë 100% gjerësi e bllokut, por lartësia është vetëm 50%, fotografia ka shumë të ngjarë të deformohet * /

3) Vlera numerike direkt (në pischel, centimetra, em, etj). Parametrat gjithashtu mund të jenë 2 (ose 1), si në rastin e mëparshëm.
4) vlera automatike. Tregon se fotografia nuk do të shtrihet, dhe madhësia fillestare do të përdoret. Në të njëjtën kohë, parametrat gjithashtu mund të jenë 2 ose 1. Kjo është, ju mund të specifikoni sa vijon:

Sfondi-Madhësia: 60% Auto; / * Gjerësia e figurës do të jetë 60%, dhe lartësia është proporcionale me madhësitë e figurës origjinale * /

Ku do të punojë zgjidhja për të shtrirë sfondin e CSS?

Duke gjykuar nga faqja mund të përdor site, do të punojë në të gjithë shfletuesit modernë, duke përfshirë versionin IE nuk është më i ulët se 9. Pra, nuk ka asnjë në parim. Shih tabelën e pajtueshmërisë:

Dita e mirë, ndërtesat e sitit të ulur dhe të dashuruarit e temave të internetit. Sot, unë dua t'i përgjigjem përgjigjes për një pyetje të shpeshtë jo vetëm të sapoardhurit, por nganjëherë zhvilluesit: "Si të zgjasni foton CSS për të gjithë ekranin?" Në fakt, një pritje e tillë është zbatuar shumë thjesht, por atëherë çështja është në tjetrën.

Deri më sot, ka shumë mënyra dhe gjuhë programimi, falë të cilave imazhi mund të vendoset në një ekran të tërë. Prandaj, në këtë publikim, unë do të flas për disa mënyra për të krijuar një imazh sfond me madhësi të plotë duke përdorur CSS, CSS3, jQuery dhe PHP. Ne fillojmë të shkojmë!

Metoda 1. Picture Adaptive Sfondi CSS

Në mënyrë që të bëjë imazhin e sfondit adaptiv, tavolinat e stilit të kaskadimit ofrojnë një pronë në sfond-madhësi. Kjo ju lejon të vendosni madhësinë e skedarit grafik në lidhje me madhësinë e skedës së hapur.

Për këtë ju duhet vetëm të shkruani këtë linjë:

në sfond-madhësia: 100%auto.

Parametri i parë, i.e. 100%, është përgjegjës për shtrirjen e fotografive horizontalisht, parametri i dytë është vertikalisht. Ne tani kthehemi në shembullin.

Kjo metodë mbështetet nga shfletuesit, duke filluar me versionin 10, 3 versionet e Safari, Firefox 3.6 dhe 9 versionin e dmth.

Metoda 2. Sfondi i gomës me CSS3

Me lirimin e specifikimit CSS3, shumë mjete të përshtatshme janë shtuar në botë. Pra, për të krijuar një sfond të shtrirë si një imazh, e njëjta pronë përdoret si në kapitullin e mëparshëm, megjithatë, madhësia e imazhit nuk jepet me përqindje, por një mbulesë e veçantë e fjalës: në sfond-madhësia:mbuluar.. Shumë i përshtatshëm, apo jo?

Për të parë se si funksionon kjo pronë, filloni shembullin e fundit duke ndryshuar parametrat e madhësisë së sfondit 100% dhe auto mbuluar..

JQuery vetë është shumë i përshtatshëm. Është më e lehtë të punosh me API me të, është më e lehtë për të hyrë në elemente të ndryshme të kodit, dhe është gjithashtu më e lehtë për të zbatuar disa gjëra.

Në mënyrë që shembulli, kjo metodë e fituar, së pari duhet të lidhni skenarin JS këtu është një linjë e tillë:

Më poshtë i bashkangjitur kodit të programit të shembullit me zbatimin e jquery tashmë futur në të.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

Planetarium në lokalitet të hapur! Mësoni yjet e largëta, planetet dhe kraterat e hënës ...

Planetarium në lokalitet të hapur!

Mësoni yjet e largëta, planetet dhe kraterat e hënës ...

Kjo metodë është universale dhe e mbështetur nga shumë shfletues edhe kur mjetet e CSS nuk punojnë.

Metoda 4. Zbatimi i PHP-së shtrihet imazhi i plotë i ekranit

Disa fjalë për shumë gjuhë. PHP është zakon i quajtur Gjuha e skriptit. Me të, ata shkruajnë pjesën e serverit të aplikacioneve të internetit, i.e. Lidheni shërbimin me një bazë të dhënash, kërkesa të procesit etj. Kodi PHP vetë është ngulitur në HTML dhe ndërvepron në mënyrë fleksibile me të.

Për të futur një pjesë të kodit, duhet të regjistroheni tekstin në këto kllapa:

Dhe tani në shembullin fillestar ju duhet të futni vetëm disa rreshta:

Zbuloi këtë mësim në një kanal në YouTube. Çip shumë i dobishëm për projektuesin e uebit sipas mendimit tim.

Ndonjëherë gjerësia e imazhit origjinal nuk është e mjaftueshme për çdo ide projektuesi, dhe shtrirja e saj në gjerësi shtrembëron objektet e nevojshme. Për të shpëtuar këto objekte në mënyrë të sigurtë dhe në të njëjtën kohë shtrihen sfondin e imazhit, Photoshop na siguron me mjete të caktuara. Dhe kështu, në fund të fundit ne kemi nga imazhi origjinal:

Duhet ta kthejë këtë:

Le të vazhdojmë. Hapni imazhin tonë në Photoshop dhe ndani objektin që ju nevojitet:

Tjetra, shkoni në skedën Përzgjedhja \u003e\u003e Ruaj zonën e zgjedhur

Dhe vendosni çdo emër arbitrar për këtë përzgjedhje:

Kështu, ne krijuam një zonë që më vonë do të mbrohet nga ndryshimet. Hapi tjetër shkoni në Redaktimi \u003e\u003e shkallë duke marrë parasysh përmbajtjen:

Dhe sigurohuni që të specifikoni objektin e mbrojtur:

Gjithçka. Mbetet vetëm për të ndryshuar gjerësinë e imazhit duke përdorur mjete standarde (ose në panelin e sipërm duke ndryshuar përqindjen në gjerësi, ose thjesht tërheq mbi imazhin). I rëndësishëm Para kësaj (ose në fazën fillestare), ndryshoni madhësinë e kanavacës në mënyrë që kufijtë e imazhit të mos shkojnë përtej fushëveprimit të saj.

Një detyrë

Stretch foto sfond në të gjithë gjerësinë e dritares së shfletuesit duke përdorur CSS3.

Vendim

Prona e sfondit është projektuar për të shkallëzuar sfondin, 100% është specifikuar si vlerë e saj, atëherë sfondi do të zënë të gjithë gjerësinë e dritares së shfletuesit. Për versionet më të vjetra të shfletuesve, përdorni vetitë specifike me prefikset, siç tregohet në shembullin 1.

Shembull 1. Sfondi elastik

HTML5 CSS 2.1 IE CR OP SA FX

Rezultati i këtij shembulli është treguar në Fig. një.

Fik. 1. Pamje e sfondit me një madhësi të reduktuar të dritares

Me rritjen e madhësisë së dritares së shfletuesit, sfondi gjithashtu do të fillojë të zgjerohet, kjo do të çojë në një përkeqësim në llojin e figurës (Fig. 2).

Fik. 2. Pamje e sfondit me një madhësi të zgjeruar të dritares

Qëllimi i këtij mësimi për të shqyrtuar mënyrat për të organizuar një imazh të sfondit për një faqe interneti, e cila gjithmonë do të shtrihet në të gjithë dritaren e shfletuesit.

Teknika duke përdorur vetëm CSS. Pjesa 1.

Përdorni elementin e vogël Dimensionet e të cilave mund të ndryshohen në çdo shfletues. Instaloni pronën min-lartësi për të mbushur dritaren e shfletuesit vertikalisht, dhe pronësia e gjerësisë caktojë një vlerë prej 100% për të mbushur horizontalisht. Gjithashtu instaloni pronën e gjerë të gjerësisë së barabartë me gjerësinë e imazhit në mënyrë që ajo kurrë nuk ka rënë.

Stroke e ndërlikuar është të përdorë kërkesën e medias për të verifikuar që gjerësia e dritares së shfletuesit është më pak se gjerësia e imazhit dhe përdorimi i kombinimit të përqindjes së pronës së majtë dhe vlerës negative për fushën e majtë për të mbuluar imazhin e sfondit.

Këtu është kodi CSS:

IMG.BG (/ * Vendosni rregullat për plotësimin e sfondit * / min-lartësi: 100%; Min-gjerësi: 1024px; / * Vendosni raportin e proporcionalitetit * / gjerësi: 100%; lartësia: auto; / * instaloni pozicionimin * / Pozita: Fixed; Top: 0; majtas: 0;) ekran @media dhe (max-gjerësi: 1024px) (/ * përcaktuar nga e saj për çdo imazh të veçantë * / img.bg (majtas: 50%; diferencë -512px; / * pesëdhjetë% * /))

Punon në:

Çdo version i një shfletuesi normal: Safari / Chrome / Opera / Firefox.

IE 6: Nuk funksionon - por ju mund të përdorni disa nga truket për pozicionimin.

IE 7/8: Në shumicën e rasteve, funksionon, nuk centon imazhe të vogla, por e mbush ekranin në mënyrë korrekte.

IE 9: Punon.

Teknika duke përdorur vetëm CSS. Pjesa 2.

Një mënyrë tjetër për të zgjidhur detyrën është vendosja e një elementi të vogël. Në faqe, rregulloni pozicionin e saj në këndin e sipërm të majtë dhe vendosni vlerën prej 100% për vetitë e tij të gjerësisë dhe min-lartësisë, duke ruajtur koeficientin e proporcionalitetit.

#Bg (pozita: fikse; top: 0; majtas: 0; / * ne ruajtur raportin e proporcionalitetit * / min-gjerësi: 100%; min-lartësi: 100%;)

Megjithatë, kështu që imazhi nuk është i përqendruar. Pra përfundoni imazhin në element

.

Do të ketë një gjerësi prej dy herë dritaren e shfletuesit. Imazhi i vendosur në të do të shpëtojë proporcione dhe të mbulojë plotësisht dritaren e shfletuesit, të vendosur pikërisht në qendër.

#Bg (pozicioni: fiks; i lartë: -50%; majtas: -50%; gjerësi: 200%; lartësia: 200%;) #BG img (pozicioni: absolut; top: 0; të majtë: 0; djathtas: 0; Fund: 0; diferencë: auto; Min-gjerësi: 50%; min-lartësi: 50%;)

Punon në:

Safari / Chrome / Firefox (nuk është testuar në të gjitha versionet, por në funksionin e fundit të fundit).

IE 8+.

Opera (çdo version) dhe dmth. Refuzon të punojë me këtë metodë (pozicionim të pasaktë të imazhit).

Ne përdorim jQuery

Ideja është shumë e thjeshtë nëse raporti i proporcionalitetit të imazhit (element i vogël Do të përdoret si një sfond) krahasuar me koeficientin e proporcionalitetit të dritares së shfletuesit. Nëse është më pak për imazhin, atëherë duhet të caktoni vetëm Pronësia e imazhit të gjerësisë Vlera është 100%, dhe do të plotësojë ekranin dhe në lartësi dhe në gjerësi. Dhe nëse më shumë, atëherë caktoni vetëm Lartësia e imazhit Vlera është 100%.

#Bg (pozicioni: fiks; top: 0; majtas: 0;) .bgwidth (gjerësia: 100%;) .bgheight (lartësia: 100%;)

$ (Funksioni () (var thewindow \u003d $ (dritare), $ bg \u003d $ ("# bg"), aspectrio \u003d $ bg.width () / $ bg.Height (); funksioni resizebg () (ifindow .width ( ) / Thewindow.Height ())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Punon në:

IE7 + (me priza ndoshta do të punojë në IE6)

Në të gjithë shfletuesit e tjerë.

Përfundim

Çdo metodë e zgjidhjes ka avantazhet dhe disavantazhet e tij. Ju vetëm duhet të zgjidhni një rast të përshtatshëm. Epo, ose sugjeroni tuajin.