Hjir is hoe't jo opnij rinnende ûntwerpbyldings taheakje kinne troch CSS te brûken
Sjoch op populêre websiden hjoed en ien ûntwerpbehandeling dy't jo wis binne te sjen is grut, skerm-spanning eftergrûnôfbyldings. Ien fan 'e útdagings mei it tafoegjen fan dizze bylden komt fan' e bêste praktyk dat websiden reagearje moatte op ferskate skermgrutte en apparaten - in oanpak dy't bekind is as respektyf web design .
Om't jo webside's wizigingen wizigingen en skalen mei ferskate skermgruttemaasjes hat, moat dizze eftergrûnôfbyldings lykwols har grutte weardichheid skaad hawwe.
Yn 't feilich binne dizze "floeibere bylden" ien fan' e kaaien stikken fan reageare websiden (tegearre mei in fluidraster en media queries). Dizze trije stikken binne al sûnt it begjin in haadleazens fan reageare web design, mar al is it altyd frij maklik te genietsjen fan ynljochtsjende ynladeôfbyldings oan in side (ynline ôfbyldings binne de grafyske letters dy't as in diel fan 'e HTML-markearring beëdige wurde), Selden mei eftergrûnôfbyldings (dy't yn 'e side brûkt wurde mei help fan CSS eftergrûn-eigenskippen) hat lang in wichtige útdaging foar in soad webûntwikkelders en foarûntwerper-ûntwikkelders oanbean. Mei tank oan it tafoegjen fan it "eftergrûn-grutte" eigenskip yn CSS hat dat mooglik makke.
Yn in aparte artikel beskôgje ik hoe't de CSS3-eigendomgrutte-grutte brûke om ôfbyldings te passen om te passen yn in finster, mar der is noch in bettere, handichere manier om te ynstallearjen foar dit eigendom. Om dit te dwaan, sille wy de neikommende eigendom en wearde kombinaasje brûke:
eftergrûn-grutte: dekking;
It beskaat keyword eigenskip fertelt de blêder om it byld te skalen om it finster te passen, sûnder dat grutte of lyts dat finster krijt. De ôfbylding is skalele om it hiele skerm te dekken, mar de orizjinele proportyen en aspect ratio wurde yntakt bewarre, it foarkommen dat it byld ferneatige is.
De ôfbylding wurdt sa grut as mooglik yn it finster setten sadat de folsleine finster-oerflak ôfbrutsen is. Dit betsjut dat jo gjin lege spots hawwe op jo side of allinich distribúsje op it ôfbylding, mar it betsjuttet ek dat guon fan it ôfbylding ôfhinklik wurde kin ôfhinklik fan it aspect ratio fan it skerm en it byld yn 'e fraach. Bygelyks kinne de rânen fan in ôfbylding (sawol boppe, boaien, lofts of rjochts) op 'e ôfbyldings ôfsnien wurde, ôfhinklik fan hokker wearden jo brûke foar it eftergrûn-posysje-eigendom. As jo de eftergrûn nei "boppe links" rjochtsje, dan sil alle oerienkommende op it byld fan 'e bottom en rjochte kant komme. As jo de eftergrûnôfbylding sintraal sille de oerienkommende skaal fan alle kanten útkomme, mar sûnt dat oerienkomst útdrukt wurdt, dan sil de ynfloed op elke side minder tsjinje.
Hoe brûkt eftergrûn-grutte: dekking;
As jo eftergrûnôfbylding skeppe, is it in goeie idee om in ôfbylding te meitsjen dat frijwat grut is. Hoewol browsers kinne in ôfbylding lytser meitsje sûnder in merkber ynfloed op fisuele kwaliteit, as in blêder in ôfbylding skriuwt oan in grutte grutter as it orizjineel diminsjes, wurdt de fisuele kwaliteit degradearre, wurde wjerljocht en pikselearre. De ûndergong dêrfoar is dat jo side in prestaasjebedriuw nimt as jo rige ôfbyldings oan alle skermen leverje.
As jo dit dogge, soargje derfoar dat jo dizze bylden goed meitsje foar it downloaden fan snelheid en webferliening . Oan 'e ein moatte jo it lokkige medium tusken in grut genôch byldgrutte en kwaliteit fine en in ridlikere triemgrutte foar download-snelheden.
Ien fan 'e mienskiplike wize om skalende eftergrûnôfbyldingen te brûken is wannear jo wolle dat dizze ôfbylding de folsleine eftergrûn fan in side opnimme wol, oft dizze side breed is en op in buroblêd komputer besjoen of folle lytser wurdt en wurdt stjoerd nei in hânhelp, mobile apparatuer.
Stjoer jo ôfbylding oan jo webhost en add it nei jo CSS as eftergrûnôfbylding:
background-image: url (fjoerwurk-over-wdw.jpg);
eftergrûn-werhelje: no-werhelje;
eftergrûn-posysje: sintrum-sintrum;
eftergrûn-attachment: fêst;
Foegje de browser foarkomt CSS earst:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Dan add it CSS-eigenskip:
eftergrûn-grutte: dekking;
Brûk ferskate ôfbyldings dy't suivere apparaten brûke
Hoewol respektyf ûntwerp foar in buroblêd of in laptopûnderfining is wichtich, is de ferskaat fan apparaten dy't tagong ta it web hawwe, groeid, en in gruttere ferskaat oan skermgrutte komt mei.
As earder neamd is, it laden fan in tige grutte antwurd op eftergrûnôfbylding op in smartphone, bygelyks, is net in effisjinte of bandbreedbewuste ûntwerp.
Learje hoe jo media fragen brûke kinne om ôfbyldings te tsjinjen dy't passend binne foar de apparaten dy't se werjaan, en fierder ferbetterje jo webside kompatibiliteit mei mobil apparaten.
Oarspronklik artikel fan Jennfier Krynin. Edited by Jeremy Girard 9/12/17