Një nga vetitë më të përdorura të css në paraqitjen e faqes në internet është vetia e sfondit të elementit të faqes (sfondi). Sot do të flasim me ju se si mund të ndryshoni përmasat. imazhi i sfondit me ndihme.
Në më shumë version i vjeter Imazhi i sfondit CSS 2.1 i aplikuar në kontejner e ruajti atë madhësive fikse... Madhësia e imazhit të sfondit nuk mund të ndryshohej. Për fat të mirë, CSS3 prezantoi veçorinë e madhësisë së sfondit, me të cilën sfondi mund të shtrihet ose tkurret.
Ka disa mënyra për të përcaktuar madhësitë -.
Ndryshimi absolut i madhësisë
Nëse specifikohet vetëm një vlerë, ajo konsiderohet të jetë gjerësia. Lartësia është vendosur në automatik dhe përmasat ruhen:
Ky kod e shkallëzon imazhin nga 200x200 në 100x100 piksele.
Ndryshimi relativ i përmasave përmes përqindjeve
Nëse aplikohen përqindje, dimensionet bazohen në artikull, JO në imazh:
Mbushni me sfond
Vetia e madhësisë së sfondit gjithashtu kupton fjalë kyçe mbulesë. Imazhi do të shkallëzohet për të mbushur të gjithë kontejnerin, por nëse raportet e pamjes janë të ndryshme, imazhi do të pritet.
| : mbulesë; |
Shkallëzimi i sfondeve të shumta
Sfondet e shumta mund të shkallëzohen duke përdorur një listë vlerash të ndarë me presje në të njëjtin rend.
| sfond: url ("sheep.png") 60% 90% pa përsëritje, url ("sheep.png") 40% 50% pa përsëritje, url ("sheep.png") 10% 20% pa përsëritje # 393; : 240px 210px, automatik, 150px; |
Gjithçka versionet e fundit shfletuesit mbështesin veçorinë e madhësisë së sfondit.
konkluzioni
Epo, tani ne e dimë se si të kontrollojmë madhësinë e imazhit të sfondit duke përdorur fletët e stilit kaskadë.
Mos harroni të abonoheni në përditësimet e blogut në mënyrë që të mos humbisni artikuj të rinj interesantë.
Një nga detyrat kryesore kur faqosje adaptive po i shkallëzon imazhet (përfshirë sfondin) në mënyrë që ato të shfaqen saktë në pajisjet me leje të ndryshme ekranet.
Me foto në etiketë img gjithçka është e thjeshtë: kur vendosni gjerësinë në përqindje, lartësia do të shkallëzohet automatikisht. Kjo metodë nuk mund të zbatohet për imazhet e sfondit.
Ky truk është për të vendosur vlerën e përqindjes së dhëmbëzimit ( mbushje) element. Metoda u botua për herë të parë në postimin e vjetër të blogut A List Apart, por gjithsesi funksionon mirë.
Supozoni se keni një imazh të sfondit 800 x 450 piksel dhe dëshironi ta bëni atë një sfond me një raport fiks të pamjes 16:9. Kodi i mëposhtëm përdoret për dhëmbëzimin px por gjithçka do të funksionojë em... Ekziston edhe një element i figurës HTML5, për të punë korrekte shfletuesit më të vjetër mund të përdorin HTML5 shiv.
Div.kolona (gjerësia maksimale: 800 px;) figura. raporti i fiksuar (mbushje-lart: 56,25%; / * 450 px / 800 px = 0,5625 * /)
Shtoni sfondin
Elementi që rezulton shkallëzohet sipas nevojës, por nëse shtoni një imazh të sfondit, rezultati nuk është shumë i mirë. Duke përdorur atributin madhësia e sfondit: kopertina... Fatkeqësisht në Internet Explorer 8 kjo metodë nuk funksionon. Për të zgjidhur këtë problem, ne pozicionojmë sfondin me sfond-pozicion. Foto e sfondit duhet të jetë së paku e barabartë në gjerësi gjerësia maksimale element. Përndryshe, fotografia do të pritet.
Div.kolona (/ * The imazhi i sfondit duhet të jetë 800 px gjerësi * / max-width: 800 px; ) figure.fixedratio (padding-top: 56,25%; / * 450px / 800px = 0,5625 * / background-image: url (http://voormedia.com/examples/north-sea-regatta.jpg); madhësia e sfondit: kopertina; -moz-sfondi-madhësia: kopertina; / * Firefox 3.6 * / pozicioni i sfondit: në qendër; / * Internet Explorer 7/8 * /)
Le të themi se keni një imazh të madh sfondi që duket i shkëlqyeshëm në një desktop. Por në pajisje celulare do të jetë shumë i vogël, pra vendimi i duhur do të zvogëlojë gjerësinë e sfondit.
Për shembull, një fotografi me një gjerësi prej 800 x 200 piksele (4: 1) nga ekran i vogël, me gjerësi 300 piksele, duhet të zvogëlohet në 150 piksele (2: 1). Le të numërojmë atributet lartësia dhe mbushje-top:
Figura tregon raportin e pamjes së sfondit në gjerësi të ndryshme. Pjerrësia e grafikut (pjerrësia) i përgjigjet atributit mbushje-top, lartësia e fillimit - atribut lartësia... Si rezultat, merret kodi:
Div.colon (/ * Imazhi i sfondit duhet të jetë 800 pikselë i gjerë * / gjerësia maksimale: 800 px;) figure.fluidratio (mbushje-lart: 10%; / * pjerrësia * / lartësia: 120 px; / * lartësia e fillimit * / sfondi- imazhi: url (http://voormedia.com/examples/amsterdam.jpg); madhësia e sfondit: kopertina; -moz-size-sfondi: kopertina; / * Firefox 3.6 * / pozicioni i sfondit: në qendër; / * Internet Explorer 7/8 * /)
Përdorimi i SCSS për llogaritjen
Atributet mbushje-top dhe lartësia mund të llogaritet automatikisht duke përdorur paraprocesorë si SCSS. Një shembull i kësaj:/ * Llogaritni raportin e lëngjeve bazuar në dy dimensione (gjerësia / lartësia) * / @mixin raporti i lëngut ($ me madhësi të madhe, $ me madhësi të vogël) ($ gjerësi-i madh: n-të ($ madhësia e madhe, 1); gjerësia $ -i vogël: n-të ($ e vogël, 1); $ lartësi-madhë: e ntë ($ e madhe, 2); $ lartësi- e vogël: e ntë ($ e vogël, 2); pjerrësi $: ($ lartësi- i madh - $ lartësi-i vogël) / ($ gjerësi-i madh - $ gjerësi-i vogël); $ lartësi: $ lartësi-i vogël - $ gjerësi-i vogël * $ pjerrësi; mbushje-maja: $ pjerrësi * 100%; lartësi: $ lartësi ; madhësia e sfondit: kopertina; -moz-madhësia e sfondit: kopertina; / * Firefox 3.6 * / pozicioni i sfondit: në qendër; / * Internet Explorer 7/8 * /) figure.fluidratio (/ * Ky element do të ketë raport fluide nga 4: 1 në 800 pikselë në 2: 1 në 300 pikselë. * / @përfshi raportin e lëngjeve (800 pikselë 200 px, 300 px 150 px); imazhi i sfondit: url (http://voormedia.com/examples/amsterdam.jpg);)
Teknologjitë e uebit, si tendencat e ndryshme të dizajnit, nuk qëndrojnë ende, kështu që çdo herë ka disa patate të skuqura dhe nuanca origjinale për faqet. Një nga këto "drejtime" është përdorimi i një sfondi (backgorund), i cili shtrihet në të gjithë ekranin në gjerësi dhe lartësi. Diçka si rreth një vit më parë ose më shumë që thashë - imazhi u vendos në kokën e blogut dhe pa probleme "kaloi" në kryesore ngjyrë e sfondit faqet e internetit. Mund ta shtoni edhe nëse dëshironi.
Vendosja e një imazhi të madh të shkallëzuar si sfond është diçka e re dhe më e vështirë, dhe gjeta një zgjidhje për të në këtë artikull.
Synimi këtë mësim vendosni një imazh të sfondit në sajt që do të mbulonte përgjithmonë të gjithë sfondin e dritares së shfletuesit. Çfarë saktësisht duhet të bëhet:
- mbushni të gjithë faqen me një imazh pa hapësira;
- ndryshimi i madhësisë së figurës nëse është e nevojshme (zvogëlimi i dritares së shfletuesit);
- ruajtja e raportit të pamjes së figurës;
- pozicionimi i imazhit në qendër të faqes;
- mungesa e shiritave të lëvizjes në faqe;
- zgjidhje ndër-shfletuesish e përshtatshme për shfletues të ndryshëm;
- zbatimi pa ndonjë teknologji flash të palëve të treta.
Pra, ka disa zgjidhje të përshtatshme për sfondin e faqes në ekran të plotë.
Një zgjidhje e mrekullueshme, e thjeshtë dhe progresive duke përdorur CSS3
Për të përmbushur këtë detyrë, ne mund të përdorim veçorinë e madhësisë së sfondit në CSS3. Ne do të përdorim një element më të mirë html sesa trupi. Le të vendosim një sfond fiks dhe të përqendruar, pas së cilës do të përdorim vlerën e kopertinës në madhësinë e sfondit.
| html (sfondi: url (imazhe / bg.jpg) qendra e qendrës së pa-përsëritjes fikse; -webkit-sfond-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: mbulesë;) |
html (sfondi: url (imazhe / bg.jpg) qendra e qendrës së pa-përsëritjes fikse; -webkit-sfond-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: mbulesë;)
Zgjidhja mbështetet nga pothuajse të gjithë të njohurit në rrjet:
- Firefox 3.6+ (Firefox 4 mbështet versionin e prefiksuar jo-shitës)
- Opera 10+ (Opera 9.5 mbështet madhësinë e sfondit, por pa vlerë kopertine)
- Chrome Çfarëdo +
- IE 9+
- Safari 3+
Një farë Goltzman gjeti një zgjidhje që lejon hakimin të funksionojë në IE
| filtri: progid: DXImageTransform.Microsoft .AlphaImageLoader (src = ".myBackground.jpg", sizingMethod = "shkallë"); -ms-filtri: "progid: DXImageTransform.Microsoft.AlphaImageLoader (src =" myBackground.jpg ", sizingMethod = "shkallë")"; |
filtri: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = ". myBackground.jpg", sizingMethod = "shkallë"); -ms-filter: "progid: DXImageTransform.Microsoft.AlphaImageLoader (src =" myBackground.jpg ", sizingMethod =" shkallë ")";
Por vëmendje!!! në këtë rast, mund të ketë disa probleme me punën e lidhjeve në faqe. Nga rruga, pak më vonë, Matt Litherland shtoi se kodi, në parim, mund të përdoret, por nuk mund të përdoret për këtë. elementet html ose trupi dhe ju duhet të zbatoni gjithçka përmes një div me lartësi dhe gjerësi 100%.
CSS- hakimi numër 1
Një version alternativ është paraqitur nga Doug Neiner. Në këtë rast, përdoret një element i integruar në faqe. e cila mund të ndryshohet në çdo shfletues. Ne vendosëm lartësinë min për të mbushur dritaren e shfletuesit vertikalisht dhe vendosëm gjerësinë në 100% për të mbushur faqen horizontalisht. Ne gjithashtu vendosim gjerësinë min në mënyrë që imazhi të mos jetë kurrë më i vogël se sa është në të vërtetë.
| img.bg ( / * Vendos rregullat për të mbushur sfondin * / min-lartësia: 100%; Min-gjerësia: 1024px; / * Vendosni shkallëzimin proporcional * / gjerësia: 100%; lartësia: auto; / * Vendosni pozicionimin * / pozicioni: fiks; krye: 0; majtas: 0; ) Ekrani @media dhe (gjerësia maksimale: 1024 px) ( / * Specifike për këtë imazh të veçantë * / img.bg (majtas: 50%; margjina majtas: -512 px; / * 50% * /)) |
img.bg (/ * Vendosni rregullat për të mbushur sfondin * / lartësia min: 100%; gjerësia minimale: 1024 px; / * Konfiguro shkallëzimin proporcional * / gjerësia: 100%; lartësia: automatikisht; / * konfiguroni pozicionimin * / pozicioni: fiks; lart: 0; majtas: 0;) Ekrani @media dhe (gjerësia maksimale: 1024 px) (/ * Specifike për këtë imazh të veçantë * / img.bg (majtas: 50%; margjina majtas: -512 px; /* 50% */ ))
Punon në çdo version të shfletuesve me cilësi të lartë - Safari / Opera / Firefox dhe Chrome. Si gjithmonë, IE ka nuancat e veta:
- IE 9 - punon;
- IE 7/8 - Më shpesh funksionon saktë, por nuk i përqendron imazhet më pak se dritarja e shfletuesit;
- IE 6 është i personalizueshëm, por kujt i duhet vërtet ky shfletues.
CSS-opsioni i hakimit 2
Një tjetër mundësi për zgjidhjen e problemit duke përdorur Stilet CSS kjo është për të vendosur imazhin inline në faqe me një pozicion fiks në të majtë këndi i sipërm dhe më pas vendosni gjerësinë min dhe lartësinë min në 100% duke mbajtur raportin e pamjes.
|
| #bg (pozicioni: fiks; lart: -50%; majtas: -50%; gjerësia: 200%; lartësia: 200%;) #bg img (pozicioni: absolute; lart: 0; majtas: 0; djathtas: 0; fundi: 0; diferenca: automatike; min-gjerësia: 50%; min-lartësia: 50%;) |
#bg (pozicioni: fiks; lart: -50%; majtas: -50%; gjerësia: 200%; lartësia: 200%;) #bg img (pozicioni: absolute; lart: 0; majtas: 0; djathtas: 0; fundi: 0; diferenca: automatike; min-gjerësia: 50%; min-lartësia: 50%;)
Hakimi funksionon në:
- Safari / Chrome / Firefox (edhe versionet e hershme jo i testuar, por funksionon mirë në këtë të fundit)
- IE 8+
- Opera (çdo version) dhe së bashku me IE, të dy kanë një gabim të njëjtë me një gabim pozicionimi.
Metoda me jQuery
Ky opsion është shumë më i lehtë (nga pikëpamja CSS) nëse e dimë se raporti i pamjes së imazhit (img përdoret si sfond) është më i madh ose më i vogël se raporti aktual i pamjes së dritares së shfletuesit. Nëse është më pak, atëherë mund të përdorim vetëm gjerësi = 100% dhe në të njëjtën kohë dritarja do të mbushet njësoj në gjerësi dhe lartësi. Nëse më shumë - mund të specifikoni vetëm lartësinë = 100% për të mbushur të gjithë dritaren.
Qasje për të gjithë të dhënat shkojnë përmes JavaScript, kodet përdoren si më poshtë:
|
|
| #bg (pozicioni: fiks; lart: 0; majtas: 0;) .bggjerësia (gjerësia: 100%;) .bgheight (lartësia: 100%;) |
#bg (pozicioni: fiks; lart: 0; majtas: 0;) .bggjerësia (gjerësia: 100%;) .bgheight (lartësia: 100%;)
| < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); }); |
$ (dritare) .load (funksioni () (var theWindow = $ (dritare), $ bg = $ ("# bg"), raporti i aspektit = $ bg.gjerësia () / $ bg.lartësia (); ndryshimi i madhësisë së funksionitBg () (nëse ((dritarja. gjerësia () / dritarja. lartësia ())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
Për mendimin tim, centrimi nuk kryhet në këtë rast (me sa kuptoj unë), por mund të bëhet. Shumica e shfletuesve të desktopit mbështeten, duke përfshirë IE7 +. Më në fund, autori i artikullit në lidhje me hakimet përgatiti një grup skedarësh shembuj në të cilët zbatohet e gjithë kjo - mund ta shkarkoni. Komentet në artikullin origjinal ofrojnë gjithashtu disa informacione dhe diskutime, megjithëse shumica detaje të rëndësishme autori shtoi në formën e përmirësimeve në postim dhe unë gjithashtu e kam të përkthyer dhe treguar. Sigurisht, shembujt do të ndihmojnë për të kuptuar të gjitha këto. Në përgjithësi, nëse jo për "gags" konstante nga IE7, të gjitha hakimet e përmendura do të ishin perfekte.
P.S. Dëshironi të blini një libër? - nuk është e nevojshme të shkoni në dyqan, sepse tani libraria në internet ju lejon të bëni gjithçka përmes rrjetit - zgjidhni, paguani dhe organizoni dërgimin në shtëpi.
Rezolucioni i monitorëve po rritet vazhdimisht dhe gjatë kodimit të faqeve në internet duhet të keni parasysh më së shumti gamë të gjerë lejet. Kjo është veçanërisht e rëndësishme kur përdorni foto sfondi, i cili ose pritet me një rezolucion të ulët të monitorit, ose, anasjelltas, nuk përshtatet plotësisht definicion të lartë... Një nga zgjidhjet një situatë të ngjashmeështë shkallëzimi i sfondit. Sigurisht, kjo premton disa telashe si shfaqja e shtrembërimeve dhe objekteve në imazhe, por gjithashtu zgjeron arsenalin e mjeteve të paraqitjes.
Madhësia kontrollohet nga vetia e madhësisë së sfondit, mund të specifikoni fjalën kyçe të kopertinës si vlerë, më pas madhësia e figurës do të jetë e tillë që gjerësia dhe lartësia e saj të përshtaten në zonën e specifikuar (për shembull, një dritare faqeje interneti); Fjala kyçe përmban shkallëzon imazhin në mënyrë që të paktën njëra anë e figurës të përshtatet plotësisht në zonën e caktuar. Përveç kësaj, lejohet të specifikohen dimensione të qarta horizontale ose vertikale në përqindje ose në të tjera Njësitë CSS... Në fig. 1 tregon ndryshimin e madhësisë së imazheve kur kuptime të ndryshme madhësia e sfondit. Në gri zgjidhet një bllok prej 280x200 pikselësh, brenda të cilit vendoset sfondi.
Oriz. 1. Pamja e imazheve të sfondit në varësi të vlerës së madhësisë së sfondit
Nëse specifikohen dy vlera dimensionale, të ndara nga një hapësirë, atëherë vlera e parë përcakton gjerësinë horizontale dhe e dyta, vertikale. Në këtë rast, përmasat injorohen, gjë që shihet qartë në Fig. 1d. Në vend të njërit prej dimensioneve, lejohet përdorimi i fjalës kyçe automatike, atëherë shfletuesi e llogarit atë automatikisht bazuar në raportin e pamjes së figurës.
Shembull 1 grupe foto sfondi që zë të gjithë dritaren e shfletuesit.
Shembull 1. Foto e sfondit
Rezultati ky shembull treguar në fig. 2. Me ndryshimin e madhësisë së dritares, fotografia do të zmadhohet ose zvogëlohet për të mbushur të gjithë faqen e internetit.
Rezolucioni i monitorëve është vazhdimisht në rritje, dhe gamën më të gjerë të rezolucioneve duhet të merret parasysh kur shtroni faqet e internetit. Kjo është veçanërisht e rëndësishme kur përdorni një sfond që ose është prerë me rezolucion të ulët të monitorit, ose, anasjelltas, nuk përshtatet plotësisht me rezolucion të lartë. Një zgjidhje për këtë situatë është zmadhimi i sfondit. Sigurisht, kjo premton disa telashe si shfaqja e shtrembërimeve dhe objekteve në imazhe, por gjithashtu zgjeron arsenalin e mjeteve të paraqitjes.
Vetia e madhësisë së sfondit është përgjegjëse për menaxhimin e madhësisë, fjala kyçe e kopertinës mund të specifikohet si një vlerë, atëherë madhësia e imazhit do të jetë e tillë që gjerësia dhe lartësia e saj të përshtaten në zonën e specifikuar (për shembull, një dritare ueb faqeje); Fjala kyçe përmban shkallëzon imazhin në mënyrë që të paktën njëra anë e figurës të përshtatet plotësisht në zonën e caktuar. Përveç kësaj, është e pranueshme të specifikohen dimensione të qarta horizontale ose vertikale në përqindje ose njësi të tjera CSS. Në fig. 1 tregon ndryshimin e madhësisë së imazheve me vlera të ndryshme të madhësisë së sfondit. Një bllok me përmasa 280x200 piksele është theksuar me gri, brenda të cilit është vendosur sfondi.
Oriz. 1. Pamja e imazheve të sfondit në varësi të vlerës së madhësisë së sfondit
Nëse specifikohen dy vlera dimensionale, të ndara nga një hapësirë, atëherë vlera e parë përcakton gjerësinë horizontale dhe e dyta, vertikale. Në këtë rast, përmasat injorohen, gjë që shihet qartë në Fig. 1d. Në vend të njërit prej dimensioneve, lejohet përdorimi i fjalës kyçe automatike, atëherë shfletuesi e llogarit atë automatikisht bazuar në raportin e pamjes së figurës.
Shembulli 1 konfiguron një foto sfondi që përfshin të gjithë dritaren e shfletuesit. Për ta bërë këtë, më duhej të vendosja html dhe lartësinë e trupit në 100%.
Shembull 1. Foto e sfondit
HTML5 CSS3 IE 9+ Cr Op Sa 5 Fx
Sfondi përfshin gjithashtu një gradient, i cili gjithashtu mund të shkallëzohet, duke marrë kështu një sërë efektesh. Për shembull, duke shtuar madhësinë e sfondit në gradient linear, do ta bëjmë atë të përsëritet, e cila formon vija të gradientit të alternuar (shembulli 2).
Shembulli 2. Vija vertikale
Rezultati i shembullit është paraqitur në Fig. 2.
Oriz. 2. Shirita gradient vertikal
Vija vertikale dhe horizontale mund të bëhen jo vetëm me gradient, por edhe me skaje të qarta. Për ta bërë këtë, duhet të specifikoni katër ngjyra në parametrat e gradientit - nga 0 në 50% ngjyra e shiritit të parë dhe nga 50% në 100% ngjyra e shiritit të dytë. Ngjyra e parë me 0% dhe ngjyra e fundit me 100% nuk kanë nevojë të shkruhet, ato shtohen nga shfletuesi automatikisht, kështu që ne do të kufizohemi në vetëm dy vlera. Shembulli 3 tregon krijimin vija horizontale 50 piksele e lartë.
Shembulli 3. Vija horizontale
HTML5 CSS3 IE 10+ Cr Op Sa Fx
Rezultati i këtij shembulli është paraqitur në Fig. 3.
Oriz. 3. Vija horizontale
Meqenëse mund të shtoni shumë sfonde në të njëjtën kohë, duke renditur parametrat e tyre të ndarë me presje, e njëjta gjë mund të bëhet me gradientët. Vetëm njëra nga ngjyrat duhet të jetë gjysmë transparente, përndryshe gradientët do të mbivendosen. Shembulli 4 aplikon dy gradientë në sfondin e faqes së internetit, duke u kryqëzuar në kënde të drejta, të cilat në kombinim me madhësinë e sfondit krijojnë qeliza.
Shembulli 4. Dy gradientë
HTML5 CSS3 IE Cr Op Sa Fx
Rezultati i këtij shembulli është paraqitur në Fig. 4.
Oriz. 4. Qelizat
Kombinimi i gradientit dhe veçorisë së madhësisë së sfondit lejon një shumëllojshmëri të gjerë të mbushjeve të sfondit të krijuara pa përdorur imazhe të sfondit.
