Hér er hvernig á að bæta við móttækilegum hönnunarmyndum með því að nota CSS
Horfðu á vinsælar vefsíður í dag og ein hönnun sem þú ert viss um að sjá er stór, skjár-spanna bakgrunnsmynd. Ein af áskorunum við að bæta þessum myndum er af bestu venjum að vefsíður verða að bregðast við mismunandi skjástærð og tækjum - nálgun sem kallast móttækilegur vefur hönnun .
Þar sem skipulag vefsvæðisins breytist og vogir með mismunandi skjástærð, svo líka verður þessi bakgrunnsmynd að kvarða stærð þeirra í samræmi við það.
Reyndar eru þessar "vökva myndir" einn af helstu stykki af móttækilegum vefsíðum (ásamt vökva rist og fjölmiðla fyrirspurnir). Þessir þrír stykki hafa verið hefðbundin vefhönnun frá byrjun, en á meðan það hefur alltaf verið nokkuð auðvelt að bæta við móttækilegum myndum á síðuna (innlínur eru grafík sem er dulmáli sem hluti af HTML markup) Sama með bakgrunnsmyndum (sem eru stíll inn á síðuna með CSS bakgrunnsmyndum) hefur lengi veitt verulegum áskorun til margra vefhönnuða og framhaldshönnuða. Sem betur fer hefur viðbót við "bakgrunnsstærð" eign í CSS gert þetta mögulegt.
Í sérstöku greininni fjallaði ég um hvernig á að nota bakgrunnsstærð CSS3 eignarinnar til að teygja myndirnar til að passa í glugga, en það er enn betri og gagnlegari leið til að senda til þessa eignar. Til að gera þetta munum við nota eftirfarandi eign og gildi samsetning:
bakgrunnsstærð: kápa;
Umfang leitarorðs segir að vafrinn sé að kvarða myndina til að passa gluggann, óháð því hversu mikið eða lítið þessi gluggi fær. Myndin er minnkuð til að ná yfir allan skjáinn, en upphafleg hlutföll og hlutföll eru haldið óbreyttum og koma í veg fyrir að myndin sé raskað.
Myndin er sett í gluggann eins stór og mögulegt er svo að allt gluggabylgjan sé þakið. Þetta þýðir að þú munt ekki hafa nein blettur á síðunni þinni eða truflun á myndinni, en það þýðir líka að hægt sé að klippa af einhverju myndinni eftir því hvort myndhlutfall skjásins og myndarinnar sem um ræðir eru. Til dæmis er hægt að skera á brúnir myndar (annaðhvort efst, neðst, vinstri eða hægri) á myndunum, eftir því hvaða gildi þú notar fyrir bakgrunnsstaða eignarinnar. Ef þú stefnir að bakgrunni til "efst til vinstri" mun einhver umfram á myndinni koma fyrir neðan og hægra megin. Ef þú miðar á bakgrunnsmyndina, mun umframið koma frá öllum hliðum, en þar sem umframið er breiðst út mun áhrifin á einhverri hlið vera minni þjóna.
Hvernig á að nota bakgrunnsstærð: kápa;
Þegar þú býrð til bakgrunnsmyndina þína, þá er það góð hugmynd að búa til mynd sem er nokkuð stór. Þó að vafrar geti gert mynd minni án þess að hafa merkjanleg áhrif á sjónrænt gæði, þegar vafra færir mynd í stærri stærð en upphafleg stærð, þá verður sjónrænt gæði niðurbrotið, orðið óskýrt og pixlað. The galli við þetta er að síðunni þín tekur árangur högg þegar þú ert að skila risastórum myndum til allra skjáa.
Þegar þú gerir þetta skaltu ganga úr skugga um að undirbúa þessar myndir rétt fyrir niðurhalshraða og vefur afhendingu . Að lokum þarftu að finna hamingjusamlega miðann á milli nógu stórs stærðar og gæði og sanngjarnt skráarstærð fyrir niðurhalshraða.
Eitt af algengustu leiðum til að nota bakgrunnslitarskjámyndir er þegar þú vilt að þessi mynd sé notuð til að taka upp fulla bakgrunn síðu, hvort sem þessi síða er breiður og sést á skjáborðs tölvu eða mun minni og er send á handfesta, farsíma tæki.
Hladdu myndinni þinni inn á vefsíðuna þína og bættu því við CSS sem bakgrunnsmynd:
bakgrunnsmynd: url (skotelda-yfir-wdw.jpg);
bakgrunnur-endurtaka: ekki-endurtaka;
Bakgrunnsstaða: Miðstöð;
Bakgrunnur-viðhengi: fastur;
Bæta við CSS vafranum fyrirfram:
-webkit-bakgrunnur-stærð: kápa;
-moz-bakgrunnur-stærð: kápa;
-o-bakgrunnur-stærð: kápa;
Bættu síðan við CSS eigninni:
bakgrunnsstærð: kápa;
Nota mismunandi myndir sem henta mismunandi tækjum
Þó móttækileg hönnun fyrir skrifborð eða fartölvu reynsla er mikilvægt, fjölbreytni tækjanna sem hafa aðgang að vefnum hefur vaxið verulega og fjölbreyttari skjár stærðir koma með það.
Eins og áður hefur komið fram er ekki mjög skilvirkt eða bandbreidd meðvitað hönnun að hlaða upp mjög stórum móttækilegum bakgrunnsmynd á snjallsíma.
Lærðu hvernig þú getur notað fjölmiðlafyrirspurnir til að þjóna myndum sem passa við tækin sem þau verða birt á og bæta enn frekar eindrægni vefsvæðisins við farsímatæki.
Upprunaleg grein af Jennfier Krynin. Breytt af Jeremy Girard 9/12/17