Pag-scale ng background. Malaking background size please! CSS

Ang resolution ng mga monitor ay patuloy na lumalaki at kapag naglalagay ng mga web page ay dapat nating isaalang-alang ang lahat malawak na hanay mga pahintulot. Ito ay lalong mahalaga kapag gumagamit larawan sa background, na maaaring putulin sa mababang resolution ng monitor, o, sa kabaligtaran, hindi ganap na magkasya sa mataas na resolution. Ang isang solusyon sa sitwasyong ito ay upang sukatin ang background. Siyempre, nangangako ito ng ilang problema, tulad ng paglitaw ng mga distortion at artifact sa mga larawan, ngunit pinapalawak din nito ang arsenal ng mga tool sa layout.

Ang laki ay kinokontrol ng background-size na property na maaaring tukuyin ang halaga keyword cover , kung gayon ang laki ng imahe ay magiging tulad na ang lapad at taas nito ay magkasya sa tinukoy na lugar (halimbawa, isang window ng web page); Ang naglalaman ng keyword ay sumusukat sa larawan upang ang kahit isang bahagi ng larawan ay ganap na magkasya sa tinukoy na lugar. Bilang karagdagan, ito ay katanggap-tanggap na magpahiwatig ng mga tahasang pahalang o patayong dimensyon sa mga porsyento o iba pa Mga yunit ng CSS. Sa Fig. Ipinapakita ng 1 ang pagbabago sa mga laki ng larawan kung kailan iba't ibang kahulugan laki ng background. Gray isang bloke ng 280x200 pixels ang napili, kung saan nakatakda ang background.

kanin. 1. Uri ng mga larawan sa background depende sa halaga ng laki ng background

Kung ang dalawang halaga ng laki ay tinukoy na pinaghihiwalay ng isang puwang, ang unang halaga ay tumutukoy sa pahalang na lapad, at ang pangalawa ay tumutukoy sa vertical na lapad. Sa kasong ito, ang mga proporsyon ay hindi pinansin, na malinaw na nakikita sa Fig. 1 taon Sa halip na isa sa mga laki, pinahihintulutang gamitin ang keyword na auto , pagkatapos ay awtomatikong kinakalkula ito ng browser batay sa mga proporsyon ng larawan.

Ang Halimbawa 1 ay nagtatakda ng background na larawan na sumasakop sa buong window ng browser.

Halimbawa 1. Larawan sa background

Pag-scale ng background

Resulta halimbawang ito ipinapakita sa Fig. 2. Habang binabago mo ang laki ng window, ang larawan ay lalago o lumiliit upang punan ang buong web page.

Mula sa may-akda: Sa tutorial na ito ay titingnan natin simpleng teknik paglikha ng larawan sa background na ganap na aabot sa buong lapad ng viewport ng browser. Para magawa ito, kailangan namin ang background-size na CSS property; Walang JavaScript na kailangan.

Mga halimbawa ng tumutugon na integer na mga larawan sa background

Sa ngayon, naging sikat na ang paggamit ng malaking larawan bilang background, na kumukuha ng buong web page. Narito ang mga halimbawa ng ilang site na may tumutugon sa buong background na mga larawan:

Kung gusto mong makamit ang katulad na resulta sa iyong susunod na proyekto sa web, ang artikulong ito ang kailangan mo.

Mga pangunahing prinsipyo

Narito ang aming plano sa pagkilos.

Gamitin ang background-size na property para ganap na punan ang viewport

Nakatakdang sakupin ang background-size na CSS property. Ang halaga ng pabalat ay nagsasabi sa browser na awtomatiko at proporsyonal na sukatin ang lapad at taas ng larawan sa background upang ito ay palaging katumbas o mas malaki kaysa sa lapad/taas ng viewport.

Gumamit ng media query para pangasiwaan ang maliliit na larawan sa background para sa mga mobile device

Upang mapahusay ang bilis ng paglo-load ng page sa maliliit na screen, gagamit kami ng media query para magproseso ng mas maliit na bersyon ng aming background na larawan. Ito ay opsyonal. Ang pamamaraan na ito ay gagana nang wala ito. Ngunit bakit magandang ideya ang paggamit ng maliit na larawan sa background para sa mga mobile device?

Ang larawang ginamit ko sa demo ay may resolution na 5500x3600px. Ang resolution na ito ay sapat para sa karamihan ng widescreen mga monitor ng computer, kasalukuyang magagamit para sa pagbebenta. Ngunit para dito kailangan mong magproseso ng file na 1.7MB ang laki.

Napakalaking karagdagang load para lang sa pagkakalagay background photography Wala naman itong maidudulot na mabuti. At, siyempre, magkakaroon ito ng labis na masamang epekto sa mga koneksyon na gumagamit mobile internet. Sobra rin ang resolution na ito para sa mga device na may maliliit na screen (titingnan natin ito nang mas detalyado sa ibang pagkakataon). Tingnan natin ang buong proseso.

HTML

Ang kailangan mo lang para sa markup ay ito:

Mag-aappoint kami larawan sa background para sa elemento ng katawan upang laging mapuno ng larawan ang buong viewport ng browser.

Gayunpaman, ang pamamaraan na ito ay gagana rin para sa sinuman elemento ng bloke(hal. div o form). Kung ang lapad at taas ng iyong block element ay tuluy-tuloy, kung gayon ang larawan sa background ay palaging sisikat upang punan ang buong lalagyan.

CSS

Itakda ang mga sumusunod na istilo para sa elemento ng katawan:

body ( /* Path sa larawan */ background-image: url(images/background-photo.jpg); /* Ang background image ay palaging nakasentro nang patayo at pahalang */ background-position: center center; /* Ang background na larawan ay hindi nauulit * / background-repeat: no-repeat /* Ang background na larawan ay naayos sa viewport, kaya hindi ito gumagalaw kapag ang taas ng nilalaman ay mas malaki kaysa sa taas ng larawan */ background-attachment: fixed /*; Ito ang nagbibigay-daan sa larawan sa background na mag-adjust sa laki ng container */ background-size: cover /* Sets kulay ng background, na ipapakita habang naglo-load ang larawan sa background */ background-color: #464646; )

katawan (

/* Landas patungo sa larawan */

background - larawan : url (mga larawan / background - larawan . jpg );

/* Ang larawan sa background ay palaging nakasentro nang patayo at pahalang */

/* Ang larawan sa background ay hindi nauulit */

background - ulitin : hindi - ulitin ;

/* Ang larawan sa background ay naayos sa viewport kaya hindi ito gumagalaw kapag ang taas ng nilalaman ay mas malaki kaysa sa taas ng larawan */

/* Ito ang nagbibigay-daan sa larawan sa background na mag-adjust sa laki ng lalagyan */

background - laki : takip ;

/* Itinatakda ang kulay ng background na ipapakita habang naglo-load ang larawan sa background */

background - kulay : #464646;

Ang pinakamahalagang property/value pair na dapat bigyang pansin ay:

laki ng background: takip;

background - laki : takip ;

Dito nagsisimula ang mahika. Sinasabi ng property/value pair na ito sa browser na sukatin ang larawan sa background nang proporsyonal, i.e. upang ang lapad at taas nito ay katumbas o mas malaki kaysa sa lapad/taas ng elemento (sa aming kaso, ang elemento ng katawan).

Gayunpaman, may isang problema sa property/value pair na ito: kung ang background na larawan ay mas maliit kaysa sa body element, ano ang mangyayari sa mga screen na may mataas na resolution at/o kapag mayroon kang malaking halaga ng nilalaman sa isang pahina, hindi maiiwasang mag-zoom in ang browser sa larawan. At tulad ng alam natin, kapag pinalaki natin ang mga sukat bitmap, bumababa ang kalidad ng imahe (sa madaling salita, nangyayari ang pixelation).

Ang pagtaas ng laki ng imahe mula sa orihinal na laki nito ay nakakaapekto sa kalidad ng imahe. Tandaan ito kapag pinili mo angkop na larawan. Gumagamit ang demo ng malaking 5500x3600px na larawan upang mga widescreen na monitor, kaya aabutin ng marami malaking screen upang mangyari ang pagbaluktot ng kalidad. Mag-move on na tayo. Upang matiyak na ang larawan sa background ay palaging nakasentro sa viewport, isusulat namin ang:

background-posisyon: center center;

Ang entry na ito ay naglalagay ng background sa coordinate axis sa gitna ng viewport. Susunod na kailangan nating tukuyin kung ano ang mangyayari kapag ang taas ng nilalaman ay lumampas sa nakikitang taas ng viewport. Kapag nangyari ito, may lalabas na scroll bar.

SA sa kasong ito kailangan nating tiyakin na ang larawan sa background ay mananatili sa orihinal nitong posisyon kahit na ang gumagamit ay nag-scroll pababa sa pahina. Sa sitwasyong ito, matatapos lang ang larawan kapag nag-scroll, o lilipat habang umuusad ang scroll (na maaaring maging lubhang nakakagambala sa gumagamit). Para ayusin ang background, itinakda namin ang background-attachment property sa fixed.

background-attachment: naayos;

background - attachment: naayos;

Sa demo, nagdagdag ako ng opsyong "load content" para makita mo kung ano ang mangyayari kapag may lumabas na scrollbar sa browser kapag nakatakdang maayos ang background-attachment property. Maaari mo ring i-download ang demo at laruin ang mga value ng property sa pagpoposisyon (gaya ng background-attachment at background-position) upang makita kung paano ito nakakaapekto sa pag-scroll ng page at sa background na larawan. Ang natitirang mga halaga ng ari-arian ay medyo maliwanag.

CSS Shorthand

Idinetalye ko ang mga katangian ng background para mas madaling ipaliwanag ang mga ito. Ang pinaikling anyo ay magiging katumbas din:

body ( background: url(background-photo.jpg) center center cover no-repeat fixed; )

katawan (

background : url (background - larawan . jpg ) center center cover no - repeat fixed ;

Ang kailangan mo lang gawin ay baguhin ang halaga ng url upang tumuro sa iyong larawan sa background.

Opsyonal: Media query para sa maliliit na screen

Para sa maliliit na screen na ginamit ko Programa ng Photoshop para proporsyonal na bawasan ang orihinal na larawan sa background sa 768x505px, at ginamit ko rin ang Smush.it upang bawasan pa ang laki. Dahil dito, bumaba ang laki ng file mula 1741KB hanggang 114KB. Yung. nabawasan ng 93% ang laki ng larawan.

Mangyaring huwag akong magkamali, ang 114KB ay marami pa rin para sa isang purong aesthetic na elemento ng disenyo. Isinasaalang-alang ang karagdagang pag-load ng 114KB, gagamit lang ako ng ganoong file kung makakita ako ng pagkakataon na makabuluhang mapabuti ang karanasan ng gumagamit (UX) ng site, dahil... V kasalukuyang sandali malaking bahagi ng trapiko sa Internet ay nagmumula sa mga mobile device na imahe: url (images/background-photo-mobile-devices.jpg);

Ang query ng media ay may limitasyon sa lapad na max-width: 767px, na nangangahulugang kung mas malaki sa 767px ang viewport ng browser, mai-load ang isang malaking larawan sa background.

Ang downside sa paggamit ng media query na ito ay kung babaguhin mo ang lapad ng iyong browser window, halimbawa mula 1200px hanggang 640px (o vice versa), makikita mo kaagad sa sandaling mag-load ang maliit o malaking background na larawan.

Bilang karagdagan dito, dahil sa ang katunayan na ang ilang mga maliliit na aparato sa screen ay maaaring magpakita higit pa pixels – halimbawa, iPhone 5 c pagpapakita ng retina may kakayahang magpakita ng resolution na 1136x640px - ang maliit na larawan sa background ay magiging pixelated.

Upang buod ito

Maaari kang makakita ng higit pa kasalukuyang bersyon source code mula sa artikulong ito ng tutorial sa GitHub. Isa lang ang maaari kong babalaan sa iyo: mangyaring gamitin ang diskarteng ito nang may pag-iingat dahil ang malalaking file ay maaaring seryosong makapinsala sa UX, lalo na kung ang end user ay gumagamit ng mabagal at hindi maaasahang koneksyon sa Internet. Ito ay isa pang dahilan kung bakit dapat kang pumili ng angkop na kulay ng background upang mabasa ng user ang nilalaman habang naglo-load ang larawan sa background.

Isa sa mga pangunahing gawain kapag adaptive na layout- ito ay pag-scale ng mga larawan (kabilang ang mga background) upang maipakita ang mga ito nang tama sa mga device na may iba't ibang mga resolusyon mga screen.

May mga larawan sa tag img Ito ay simple: kapag itinakda mo ang lapad bilang isang porsyento, ang taas ay awtomatikong mai-scale. Ang paraang ito ay hindi mailalapat sa mga larawan sa background.

Ang trick na ito ay upang itakda ang halaga ng porsyento ng padding ( padding) elemento. Ang pamamaraan ay unang nai-publish sa isang lumang artikulo sa blog na A List Apart, ngunit gumagana pa rin ito nang maayos.

Sabihin nating mayroon kang larawan sa background na 800 by 450 pixels, at gusto mo itong gawing background na may nakapirming aspect ratio na 16:9. Ginagamit ng code sa ibaba para sa indentation px, ngunit lahat ay gagana sa em. Mayroon ding HTML5 figure element para sa tamang operasyon sa mas lumang mga browser maaari mong gamitin ang HTML5 shiv.

Div.column ( max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ )

Pagdaragdag ng background

Ang nagreresultang elemento ay sumusukat gaya ng inaasahan, ngunit kung magdadagdag ka ng larawan sa background, ang resulta ay hindi magiging napakaganda. Gamit ang attribute laki ng background: takip. Sa kasamaang palad, sa Internet Explorer 8 hindi gumagana ang paraang ito. Upang malutas ang problemang ito, inilalagay namin ang background gamit ang background-posisyon. Ang larawan sa background ay dapat na hindi bababa sa lapad ng max-width elemento. Kung hindi, ang larawan ay i-crop.

Div.column ( /* Ang larawan sa background dapat ay 800px ang lapad */ max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center /* Internet Explorer 7/8 */ )

Sabihin nating mayroon kang malaking larawan sa background na mukhang maganda sa desktop. Ngunit sa mobile device ito ay magiging masyadong maliit, kaya ang tamang solusyon ay upang bawasan ang lapad ng background.

Halimbawa, isang imahe na may lapad na 800 by 200 pixels (4:1) sa maliit na screen, na may lapad na 300 pixels, ay dapat bawasan sa 150 pixels (2:1). Bilangin natin ang mga katangian taas At padding-top:

Ipinapakita ng figure ang aspect ratio ng background na larawan kung kailan iba't ibang lapad. Ang slope ng graph ay tumutugma sa katangian padding-top, simula taas - sa katangian taas. Ang resultang code ay:

Div.column ( /* Ang larawan sa background ay dapat na 800px ang lapad */ max-width: 800px; ) figure.fluidratio ( padding-top: 10%; /* slope */ height: 120px; /* start height */ background- larawan: url(http://voormedia.com/examples/amsterdam.jpg); laki ng background: -moz-background-size: cover; /8 */ )

Paggamit ng SCSS para sa Pagkalkula

Mga Katangian padding-top at taas maaaring awtomatikong kalkulahin gamit ang mga preprocessor tulad ng SCSS. Isang halimbawa nito:

/* Kalkulahin ang ratio ng fluid batay sa dalawang dimensyon (lapad/taas) */ @mixin fluid-ratio($large-size, $small-size) ($width-large: nth($large-size, 1); $width -small: nth($small-size, 1); $height-large: nth($large-size, 2); / ($width-large - $width-small); $height-small - $width-slope * 100%; ; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Ang elementong ito ay magkakaroon ng fluid ratio mula 4:1 sa 800px hanggang 2:1 sa 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg);

Ang mga teknolohiya sa web, tulad ng iba't ibang uso sa disenyo, ay hindi tumitigil, kaya sa tuwing lilitaw ang ilang orihinal na feature at nuances para sa mga website. Ang isa sa mga "direksyon" na ito ay ang paggamit ng background (backgorund), na umaabot sa buong screen sa lapad at taas. Isang bagay tulad ng mga isang taon o higit pa ang nakalipas sinabi ko - ang imahe ay inilagay sa header ng blog at maayos na "nailipat" sa pangunahing kulay ng background ng web page. Kung nais mo, maaari mo ring idagdag ang .

Ang paglalagay ng malaking scalable na imahe bilang background ay isang bagay na bago at mas kumplikado, ang solusyon na nakita ko sa artikulong ito.

Target ang araling ito maglagay ng larawan sa background sa site na patuloy na sasakupin ang buong background ng browser window. Ano ang eksaktong kailangang gawin:

punan ang buong pahina ng isang larawan na walang mga puwang;
pagbabago ng laki ng imahe kung kinakailangan (pagbabawas ng window ng browser);
pagpapanatili ng mga sukat ng imahe;
pagpoposisyon ng imahe sa gitna ng pahina;
kakulangan ng mga scroll bar sa pahina;
cross-browser na solusyon na angkop para sa iba't ibang mga browser;
pagpapatupad nang walang anumang mga teknolohiyang third-party gaya ng flash.

Kaya, mayroong ilang mga angkop na solusyon para sa isang full-screen na background ng website.

Isang kahanga-hanga, simple at progresibong solusyon gamit ang CSS3

Upang maisakatuparan ang gawaing ito, maaari naming gamitin ang background-size na property sa CSS3. Gagamit kami ng isang html na elemento na mas mahusay kaysa sa katawan. Itakda natin ang background na maayos at nakasentro, at pagkatapos ay gamitin ang value cover sa background-size.

html ( background : url (images/bg.jpg ) no-repeat center center fixed ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size : takip)

html ( background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: takip)

Ang solusyon ay sinusuportahan ng halos lahat ng mga sikat sa network:

Firefox 3.6+ (Sinusuportahan ng Firefox 4 ang prefix na bersyon na hindi nagbebenta)
Opera 10+ (Sinusuportahan ng Opera 9.5 ang laki ng background ngunit walang halaga ng pabalat)
Chrome Whatever+
IE 9+
Safari 3+

Ang isang tiyak na Goltzman ay nakahanap ng solusyon na nagpapahintulot sa hack na gumana sa IE

filter : progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg" , sizingMethod= "scale" ); -ms-filter:;

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

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale""); Pero pansin!!! maaaring magdulot ito ng ilang problema sa mga link sa pahina. Sa pamamagitan ng paraan, ilang sandali ay idinagdag ni Matt Litherland na ang code, sa prinsipyo, ay maaaring gamitin ngunit hindi magagamit para dito mga elemento ng html

o katawan, ngunit kailangan mong ipatupad ang lahat sa pamamagitan ng isang div na may 100% taas at lapad.CSS

-hack number 1 Ang isang alternatibong bersyon ay ipinakita ni Doug Neiner. Sa kasong ito, ginagamit ang isang elementong naka-embed sa page

, na maaaring baguhin ang laki sa anumang browser. Itinakda namin ang halaga ng min-height, na pumupuno sa window ng browser nang patayo, at itinakda ang lapad sa 100%, na pumupuno sa pahina nang pahalang. Nagtakda din kami ng min-width upang ang imahe ay hindi kailanman mas maliit kaysa sa aktwal na ito. img.bg (/* Magtakda ng mga panuntunan upang punan ang background */ min-taas: 100%; min-width: 1024px; /* I-set up ang proporsyonal na scaling */ lapad: 100%;

img.bg ( /* Magtakda ng mga panuntunan para punan ang background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ posisyon: fixed sa itaas: 0; kaliwa: 0; ) @media screen at (max-width: 1024px) ( /* Partikular sa partikular na larawang ito */ img.bg ( kaliwa: 50%; margin-left: -512px; / * 50% */ ) )

Gumagana sa anumang bersyon ng mga de-kalidad na browser - Safari / Opera / Firefox at Chrome. Gaya ng dati, ang IE ay may sariling mga nuances:

IE 9 - gumagana;
IE 7/8 - kadalasan ay gumagana nang tama, ngunit hindi nakasentro ang mga larawang mas maliit kaysa sa window ng browser;
IE 6 - maaaring i-customize, ngunit sino pa rin ang nangangailangan ng browser na ito.

o katawan, ngunit kailangan mong ipatupad ang lahat sa pamamagitan ng isang div na may 100% taas at lapad.-hack na opsyon 2

Isa pang pagpipilian para sa paglutas ng problema sa gamit ang CSS style ay ang paglalagay ng inline na imahe sa page na may nakapirming posisyon sa kaliwa itaas na sulok, at pagkatapos ay itakda ang min-width at min-height sa 100% habang pinapanatili ang mga proporsyon.

#bg ( posisyon : fixed ; tuktok : -50% ; kaliwa : -50% ; lapad : 200% ; taas : 200% ; ) #bg img ( posisyon : absolute ; tuktok : 0 ; kaliwa : 0 ; kanan : 0 ; ibaba: 0; margin: auto;

#bg ( position:fixed; top:-50%; left:-50%; width:200%; height:200%; ) #bg img ( position:absolute; top:0; left:0; right:0; ibaba:0; margin:auto;

Gumagana ang hack sa:

Safari / Chrome / Firefox (masyadong maagang bersyon hindi nasubok, ngunit gumagana nang maayos sa mga pinakabago)
IE 8+
Ang Opera (anumang bersyon) at kasama ng IE ay parehong may buggy sa parehong paraan na may error sa pagpoposisyon.

Paraan sa jQuery

Ang pagpipiliang ito ay mas madali (mula sa isang CSS point of view) kung alam natin na ang aspect ratio ng imahe (img na ginamit bilang background) ay mas malaki o mas maliit kaysa sa kasalukuyang aspect ratio ng browser window. Kung ito ay mas kaunti, pagkatapos ay maaari lamang nating gamitin ang lapad = 100% at ang window ay pantay na mapupuno sa lapad at taas. Kung higit pa, maaari mo lamang tukuyin ang taas = 100% upang punan ang buong window.

Ang lahat ng data ay ina-access sa pamamagitan ng JavaScript, ang mga code na ginamit ay ang mga sumusunod:

#bg ( posisyon : fixed ; itaas : 0 ; kaliwa : 0 ; ) .bgwidth ( width : 100% ; ) .bgheight ( height : 100% ; )

#bg ( position: fixed; top: 0; left: 0; ) .bgwidth ( width: 100%; ) .bgheight ( height: 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() ( kung ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Sa aking opinyon, ang pagsentro ay hindi ginagawa sa kasong ito (sa pagkakaintindi ko), ngunit maaari itong gawin. Karamihan sa mga desktop browser ay sinusuportahan, kabilang ang IE7+. Sa wakas, ang may-akda ng artikulo tungkol sa mga hack ay naghanda ng isang hanay ng mga halimbawang file kung saan ang lahat ng ito ay ipinatupad - maaari mong i-download ito. Ang mga komento sa orihinal na artikulo ay naglalaman din ng ilang impormasyon at talakayan, bagaman karamihan mahahalagang detalye idinagdag ng may-akda sa anyo ng mga uprights sa post at mayroon din akong isinalin at ipinahiwatig. Siyempre, ang mga halimbawa ay makakatulong sa iyo na maunawaan ang lahat ng ito. Sa pangkalahatan, kung hindi para sa patuloy na "gags" mula sa IE7, ang lahat ng nabanggit na mga hack ay magiging perpekto.

P.S. Gustong bumili ng libro? - hindi mo na kailangang pumunta sa tindahan dahil pinapayagan ka ng online na bookstore na gawin ang lahat online - pumili, magbayad at ayusin ang paghahatid sa bahay.

Pagsasalin: Vlad Merzhevich

Sa CSS 2.1, ang isang background na larawan na inilapat sa isang lalagyan ay nagpapanatili nito mga nakapirming laki. Sa kabutihang palad, ipinakilala ng CSS3 ang background-size na property, na nagbibigay-daan sa background na ma-stretch o ma-compress. Tamang-tama kung gumagawa ka ng tumutugon na template ng disenyo ng web.

Mayroong ilang mga paraan upang tukuyin ang mga laki - tingnan ang pahina ng demo na laki ng background.

Ganap na pagbabago ng laki

Maaaring ilapat ang mga yunit ng pagsukat.

Laki ng background: lapad-taas;

Bilang default, ang lapad at taas ay nakatakda sa auto , na aalis orihinal na sukat mga larawan.

Maaari kang magtanong bagong sukat mga larawang gumagamit ng ganap na mga yunit ng pagsukat gaya ng px, em, cm, atbp. Magbabago ang mga proporsyon kung kinakailangan. Halimbawa, kung ang aming larawan sa background ay may mga dimensyon na 200x200 pixels, ang sumusunod na code ay iiwan ang taas na ito, ngunit gawing kasing laki ng kalahati ang lapad:

Laki ng background: 100px 200px;

Kung isang halaga lamang ang tinukoy, ito ay itinuturing na lapad. Ang taas ay nakatakda sa auto at ang mga proporsyon ay pinapanatili:

Laki ng background: 100px;

/* katulad */ background-size: 100px auto;

Sinusukat ng code na ito ang larawan mula 200x200 hanggang 100x100 pixels.

Mga pagbabago sa kamag-anak na laki sa pamamagitan ng mga porsyento

Kung inilapat ang mga porsyento, ang mga sukat ay nakabatay sa elemento at HINDI sa larawan:

Laki ng background: 50% auto;

Ang lapad ng larawan sa background ay depende sa mga sukat ng lalagyan. Kung ang lalagyan ay may lapad na 500px, ang laki ng aming larawan ay babawasan sa 250x250. Ang paggamit ng mga porsyento ay maaaring maging kapaki-pakinabang para sa adaptive na disenyo

. Baguhin ang lapad ng pahina ng demo upang makita kung paano nagbabago ang mga sukat.

Naiintindihan din ng property na may sukat sa background ang naglalaman ng keyword. Pina-scale nito ang imahe upang mapuno nito ang lalagyan. Sa madaling salita, ang imahe ay lalago o lumiliit nang proporsyonal, ngunit ang lapad at taas ay hindi lalampas sa mga sukat ng lalagyan:

Laki ng background: naglalaman;

Punan ng background

Nauunawaan din ng property na laking background ang cover keyword. Ang imahe ay i-scale upang punan ang buong lalagyan, ngunit kung ang mga aspect ratio ay iba, ang larawan ay i-crop.

Laki ng background: takip;