Kaip į svetainę įtraukti reaguojančius fono vaizdus

Štai kaip pridėti interaktyvaus dizaino vaizdus naudojant CSS

Hannah Mentz / Getty Images

Pažvelkite į populiarias svetaines šiandien ir vienas dizaino elementas, kurį tikrai pamatysite, yra dideli ekrano fono vaizdai. Vienas iš iššūkių, susijusių su šių vaizdų pridėjimu, kyla dėl geriausios praktikos, pagal kurią svetainės turi reaguoti į skirtingus ekrano dydžius ir įrenginius – šis metodas žinomas kaip responsive web dizainas .

Vienas vaizdas daugeliui ekranų

Kadangi jūsų svetainės išdėstymas keičiasi ir keičiasi skirtingais ekrano dydžiais, šie fono vaizdai taip pat turi atitinkamai keisti savo dydį. Tiesą sakant, šie „skystūs vaizdai“ yra viena iš pagrindinių reaguojančių svetainių dalių (kartu su sklandžiu tinkleliu ir žiniasklaidos užklausomis). Šios trys dalys buvo interaktyvaus žiniatinklio dizaino elementas nuo pat pradžių, tačiau, nors visada buvo gana lengva į svetainę įtraukti interaktyvių eilutinių vaizdų (įterptieji vaizdai yra grafika, užkoduota kaip HTML žymėjimo dalis), Tas pats su fono vaizdais (kurie stilizuojami į puslapį naudojant CSS fono ypatybes) jau seniai kėlė didelį iššūkį daugeliui žiniatinklio dizainerių ir sąsajos kūrėjų. Laimei, CSS pridėjus „fono dydžio“ ypatybę tai tapo įmanoma.

Atskirame straipsnyje aptarėme, kaip naudoti CSS3 nuosavybės fono dydis ištempti vaizdus, ​​kad tilptų lange, tačiau yra dar geresnis ir naudingesnis būdas pritaikyti šiai nuosavybei. Norėdami tai padaryti, naudosime šį nuosavybės ir vertės derinį:

|_+_|

Viršelio raktinio žodžio ypatybė nurodo naršyklei pakeisti vaizdą, kad jis tilptų į langą, neatsižvelgiant į tai, koks didelis ar mažas tas langas. Vaizdo mastelis dengiamas taip, kad apimtų visą ekraną, tačiau originalios proporcijos ir kraštinių santykis išlieka nepakitę, todėl pats vaizdas neiškraipomas. Vaizdas įdedamas į langą kuo didesnis, kad būtų uždengtas visas lango paviršius. Tai reiškia, kad puslapyje nebus tuščių dėmių ar vaizdo iškraipymų, tačiau tai taip pat reiškia, kad dalis vaizdo gali būti apkarpyta, atsižvelgiant į ekrano ir atitinkamo vaizdo formatų santykį. Pavyzdžiui, vaizdo kraštai (viršuje, apačioje, kairėje arba dešinėje) gali būti nukirpti vaizduose, atsižvelgiant į tai, kokias reikšmes naudojate fono padėties ypatybei. Jei nukreipsite foną į „viršuje kairę“, bet koks vaizdo perteklius nukris iš apačios ir dešinės pusės. Jei fono paveikslėlį pateiksite centre, perteklius nukris iš visų pusių, bet kadangi šis perteklius bus išsklaidytas, bet kurios pusės poveikis bus mažesnis.

Kaip naudoti 'fono dydis: viršelis;'

Kuriant fono paveikslėlį, gera idėja sukurti gana didelį vaizdą. Nors naršyklės gali sumažinti vaizdą be pastebimo poveikio vaizdo kokybei, naršyklei padidinus vaizdą iki didesnio nei pradiniai matmenys, vaizdo kokybė pablogės, taps neryški ir pikseliais. Neigiamas aspektas yra tas, kad jūsų puslapis pasiekia našumą, kai pateikiate milžiniškus vaizdus visuose ekranuose. Kai tai padarysite, įsitikinkite, kad tinkamai paruoškite tuos vaizdus atsisiuntimo greičiui ir pristatymui žiniatinklyje . Galų gale turite rasti laimingą terpę tarp pakankamai didelio vaizdo dydžio ir kokybės bei pagrįsto failo dydžio atsisiuntimo greičiui.

Vienas iš įprastų fono vaizdų mastelio keitimo būdų yra tada, kai norite, kad vaizdas užimtų visą puslapio foną, nesvarbu, ar tas puslapis platus ir žiūrimas staliniame kompiuteryje, ar daug mažesnis ir siunčiamas į delninį, mobilųjį. įrenginiai.

Įkelkite vaizdą į žiniatinklio prieglobą ir pridėkite jį prie CSS kaip fono paveikslėlį:

|_+_|

Pirmiausia pridėkite naršyklės priešdėlį CSS:

|_+_|

Tada pridėkite CSS ypatybę:

|_+_|

Įvairių vaizdų, tinkančių įvairiems įrenginiams, naudojimas

Nors interaktyvus stalinio ar nešiojamojo kompiuterio dizainas yra svarbus, įrenginių, galinčių pasiekti žiniatinklį, įvairovė labai išaugo, todėl atsiranda didesnė ekrano dydžių įvairovė.

Kaip minėta anksčiau, pavyzdžiui, labai didelio jautraus fono paveikslėlio įkėlimas į išmanųjį telefoną nėra efektyvus ir nepralaidus.

Sužinokite, kaip galite naudoti žiniasklaidos užklausos teikti vaizdus, ​​​​kurie bus tinkami įrenginiams, kuriuose jie bus rodomi, ir dar labiau pagerinti jūsų svetainės suderinamumą su mobiliaisiais įrenginiais.