Štai kaip pridėti jautrūs dizaino vaizdus naudojant CSS
Pažvelkite į populiarių svetainių šiandien ir vieną dizaino procedūrą, kad jūs tikrai pamatyti yra didelis, ekrano fono paveikslėlius. Vienas iš iššūkių pridėjus šiuos vaizdus gaunama iš geriausios praktikos, pagal kurią tinklalapiai turi reaguoti į skirtingus ekrano dydžius ir įrenginius - tai metodas, vadinamas reaguoja web dizainas .
Kadangi jūsų svetainės išdėstymas pasikeičia ir skalės skiriasi skirtingais ekrano dydžiais, taip pat šie foniniai vaizdai turi atitinkamai išmėginti jų dydį.
Iš tiesų, šie "skysti vaizdai" yra vienas iš pagrindinių reaguoja į tinklalapius (kartu su skysčių tinkleliu ir žiniasklaidos užklausomis). Šie trys elementai nuo pat pradžių buvo jautrūs interneto dizaino elementai, tačiau, nors visada buvo gana lengva įtraukti į svetainę reaguotą įterptinius vaizdus (vidiniai vaizdai yra grafika, koduojama kaip HTML žymėjimo dalis), atliekant Tas pats su fono vaizdais (kurie yra suprojektuoti į puslapį, naudojant CSS fono ypatybes) jau ilgą laiką buvo didžiulis iššūkis daugeliui interneto dizainerių ir priekinių kūrėjų. Laimei, "CSS" nuosavybės "fono dydžio" įtraukimas padarė tai įmanoma.
Atskirame straipsnyje apžvelgiau, kaip naudoti CSS3 nuosavybės fono dydį, kad ištiestų vaizdus, kad jie tilptų į langą, tačiau yra dar geresnis, naudingesnis būdas šiam turtui diegti. Norėdami tai padaryti, mes naudosime šį nuosavybės ir vertės kombinaciją:
fono dydis: viršelis;
Dangtelio raktinio žodžio nuosavybė nurodo naršyklę, kad mastelis atitiktų langą, nepriklausomai nuo to, koks langas yra didelis ar mažas. Vaizdas yra mažinamas, kad apimtų visą ekraną, tačiau originalios proporcijos ir proporcijos yra laikomos nepažeistos, neleidžiant iškraipyti vaizdo.
Vaizdas įdėtas į kuo didesnį langą, kad būtų padengtas visas lango paviršius. Tai reiškia, kad jūsų puslapyje nebus jokių tuščių dėmių ar vaizdo iškraipymų, bet tai taip pat reiškia, kad tam tikras vaizdas gali būti apkarpytas priklausomai nuo ekrano ir nagrinėjamo vaizdo proporcijos. Pavyzdžiui, paveikslėlio kraštai (viršuje, apačioje, kairėje arba dešinėje) gali būti nukirpti vaizdams priklausomai nuo to, kokias reikšmes naudojate fono padėties savybei. Jei orientuosite foną į "viršutinį kairįjį", bet koks vaizdų perviršis nukris iš apačios ir dešinės pusės. Jei fokusuojatės į fono paveikslėlį, perviršis išsilygins iš visų pusių, tačiau, kadangi šis perviršis pasiskirsto, poveikis vienai pusei bus mažiau naudingas.
Kaip naudoti fono dydį: dangtelį;
Kuriant fono paveikslėlį, gera idėja sukurti pakankamai didelį vaizdą. Nors naršyklės gali padaryti vaizdą mažesnę, be pastebimo vaizdo kokybės, kai naršyklė padidina vaizdą, kurio dydis yra didesnis už originalius matmenis, vaizdo kokybė pablogės, bus neryškus ir pikseliuotas. Neigiamas dalykas yra tai, kad jūsų puslapis užfiksuoja našumą, kai pateikiate milžiniškus vaizdus į visus ekranus.
Kai tai padarysite, įsitikinkite, kad tinkamai paruošti šiuos paveikslėlius norėdami atsisiųsti greitį ir pristatyti žiniatinklį . Galų gale turėtumėte rasti laimingą terpę tarp pakankamai didelio vaizdo dydžio ir kokybės bei pagrįsto failo dydžio atsisiuntimo greičiui.
Vienas iš dažniausių būdų, kaip naudoti fono vaizdų mastelį, yra toks, kai norite, kad šis vaizdas atitiktų visą puslapio faile, nesvarbu, ar šis puslapis yra platus, ir ar jį žiūri staliniame kompiuteryje, ar daug mažesni, ir siunčiamas į delninį, mobilųjį telefoną prietaisai.
Įkelkite savo vaizdą į savo žiniatinklio prieglobos serverį ir pridėkite jį prie savo CSS kaip fono paveikslėlį:
fono paveikslėlis: url (fejerverkų per-wdw.jpg);
fono kartojimas: ne kartoti;
fono padėtis: centro centras;
fono priedas: fiksuotas;
Pridėkite naršyklę iš anksto pateiktą CSS:
-webkit-fono dydis: viršelis;
-moz-fono dydis: viršelis;
fono dydis: viršelis;
Tada pridėkite CSS nuosavybę:
fono dydis: viršelis;
Naudojant skirtingus vaizdus, atitinkančius skirtingus įrenginius
Nors svarbus darbastalio ar nešiojamasis proceso dizainas yra itin svarbus, prietaisų, kurie gali pasiekti žiniatinklį, įvairovė gerokai padidėjo. Taip pat yra ir daugiau ekrano įvairovės.
Pavyzdžiui, kaip minėta anksčiau, įkeliant labai didelį jautrų fono vaizdą į išmanųjį telefoną nėra efektyvus arba pralaidumo sąmoningas dizainas.
Sužinokite, kaip galite naudoti žiniasklaidos užklausas , kad pateiktumėte vaizdus, kurie būtų tinkami įrenginiams, kuriuose jie bus rodomi, ir toliau tobulinsite savo svetainės suderinamumą su mobiliaisiais įrenginiais.
Originalus straipsnio autorius Jennfier Krynin. Redagavo Jeremy Girard 9/12/17