Pažvelkite į populiarias svetaines šiandien ir vienas dizaino būdas, kurį tikrai pamatysite, yra dideli, ekrano pločio fono paveikslėliai. Vienas iš iššūkių, susijusių su šių vaizdų pridėjimu, kyla iš geriausios praktikos, kad svetainės turi reaguoti į skirtingus ekrano dydžius ir įrenginius reaguojantis interneto dizainas.
Vienas vaizdas daugeliui ekranų
Kadangi jūsų svetainės išdėstymas keičiasi ir keičiasi skirtingų dydžių ekranu, šie fono paveikslėliai taip pat turi atitinkamai keisti jų dydį. Tiesą sakant, šie „sklandūs vaizdai“ yra vienas iš pagrindinių reaguojančių svetainių elementų (kartu su skysčių tinkleliu ir žiniasklaidos užklausomis). Šie trys kūriniai nuo pat pradžių buvo pagrindinis reaguojančio interneto dizaino elementas, tačiau, nors visada buvo gana lengva pridėti įterpti vaizdus į svetainę (įterpti vaizdai yra grafika, kuri užkoduota kaip HTML žymėjimo dalis), darant tą patį su fono paveikslėliais (kurie yra sukomponuoti į puslapį naudojant CSS fono ypatybes) jau seniai yra reikšmingas iššūkis daugeliui interneto dizainerių ir „front end“ kūrėjai. Laimei, tai pavyko pridėjus „fono dydžio“ ypatybę CSS.
Atskirame straipsnyje aptarėme, kaip naudoti CSS3 ypatybės fono dydis ištiesti vaizdus, kad tilptų į langą, tačiau šiai nuosavybei yra dar geresnis, naudingesnis diegimo būdas. Norėdami tai padaryti, naudosime šį savybių ir verčių derinį:
fono dydis: viršelis;
Viršelio raktinio žodžio ypatybė nurodo naršyklei keisti vaizdą taip, kad jis atitiktų langą, neatsižvelgiant į tai, koks didelis ar mažas tas langas yra. Vaizdas keičiamas taip, kad apimtų visą ekraną, tačiau originalios proporcijos ir formato santykis lieka nepakitę, neleidžiant iškraipyti paties vaizdo. Vaizdas dedamas į langą kuo didesnis, kad būtų padengtas visas lango paviršius. Tai reiškia, kad puslapyje neturėsite tuščių taškų ar vaizdo iškraipymų, tačiau taip pat reiškia, kad dalis vaizdo gali būti apipjaustyta, atsižvelgiant į ekrano ir vaizdo vaizdų santykį klausimas. Pvz., Paveikslėlio kraštai (viršuje, apačioje, kairėje arba dešinėje) gali būti nukirpti, atsižvelgiant į tai, kurias vertes naudojate ypatybei fonas. Jei orientuosite foną į „viršuje kairėje“, bet koks vaizdo perteklius nukris nuo apatinės ir dešinės pusės. Jei centruosite fono vaizdą, perteklius atsiras iš visų pusių, tačiau kadangi tas perteklius pasiskirstys, poveikis vienai pusei bus mažiau naudingas.
Kaip naudoti „background-size: cover;“
Kuriant savo fono paveikslėlį, verta sukurti gana didelį vaizdą. Nors naršyklės gali padaryti vaizdą mažesnį, be pastebimo poveikio vaizdo kokybei, kai naršyklė padidina vaizdas bus didesnis nei originalūs matmenys, vaizdo kokybė pablogės, taps neryški ir pikselių. Neigiama yra tai, kad jūsų puslapis pasiekia našumą, kai pateikiate milžiniškus vaizdus į visus ekranus. Tai atlikdami įsitikinkite, kad tinkamai paruoškite tuos vaizdus atsisiuntimo greičiui ir pristatymui internete. Galų gale turite rasti laimingą terpę tarp pakankamai didelio vaizdo dydžio ir kokybės bei pagrįsto failo dydžio, kad būtų galima atsisiųsti.
Vienas iš įprastų foninių vaizdų mastelio keitimo būdų yra tai, kai norite, kad tas vaizdas užimtų visą puslapio foną, ar tas puslapis yra platus ir žiūrimas staliniame kompiuteryje, ar daug mažesnis ir siunčiamas į rankinį mobilųjį prietaisai.
Įkelkite vaizdą į savo žiniatinklio prieglobą ir pridėkite jį prie savo CSS kaip fono paveikslėlį:
fono paveikslėlis: url (fejerverkai-per-wdw.jpg);
fonas pakartoti: ne kartoti;
fono padėtis: centro centras;
pritvirtinimas prie fono: fiksuotas;
Pirmiausia pridėkite naršyklės prefiksą CSS:
-webkit-background-size: viršelis;
-moz-background-size: viršelis;
-ofono dydis: viršelis;
Tada pridėkite CSS ypatybę:
fono dydis: viršelis;
Naudojant skirtingus vaizdus, kurie tinka įvairiems įrenginiams
Nors svarbu reaguoti į darbalaukio ar nešiojamojo kompiuterio dizainą, svarbu įrenginių įvairovė žymiai išaugo prieiga prie interneto, todėl pateikiama didesnė ekrano dydžių įvairovė kad.
Kaip minėta anksčiau, labai didelio reaguojančio fono paveikslėlio įkėlimas, pavyzdžiui, į išmanųjį telefoną, nėra efektyvus ar į pralaidumą atsižvelgiantis dizainas.
Sužinokite, kaip galite naudoti žiniasklaidos užklausos pateikti vaizdus, kurie atitiks įrenginius, kuriuose jie bus rodomi, ir dar labiau pagerinsite savo svetainės suderinamumą su mobiliaisiais įrenginiais.