Näin voit lisätä reagoivia kuvioita CSS: n avulla
Katso suosittuja verkkosivustoja tänään ja yksi suunnittelukäsittely, jonka olet varmasti nähnyt, on suuret, näytön kokoiset taustakuvat. Yksi haasteista näiden kuvien lisäämisessä on paras käytäntö, jonka verkkosivustojen on vastattava eri näytön kokoihin ja laitteisiin - lähestymistapa, joka tunnetaan reagoivana web-suunnitteluna .
Koska sivustosi ulkoasu muuttuu ja skaalaa eri näytön koolla, niin myös nämä taustakuvat skaalata koonsa vastaavasti.
Itse asiassa nämä "nestemäiset kuvat" ovat yksi herkkien verkkosivustojen keskeisimmistä osista (yhdessä nestemäisten verkkojen ja median kyselyiden kanssa). Nämä kolme kappaletta ovat olleet alkupe- räisesti reagoivan web-suunnittelun elementtejä, mutta aina on melko helppoa lisätä reagoivia sisäisiä kuvia sivustoon (inline-kuvat ovat grafiikkaa, joka on koodattu osana HTML-merkintää). samoin kuin taustakuvat (jotka on muotoiltu sivulle CSS: n taustaominaisuuksilla) on jo pitkään ollut merkittävä haaste monille web-suunnittelijoille ja etupään kehittäjille. Onneksi CSS: n "taustakuvan" ominaisuuden lisääminen on tehnyt tämän mahdolliseksi.
Eräässä erillisessä artikkelissa käsittelin, miten CSS3-ominaisuuden taustakuvan käyttäminen venyttää kuvat sopivaksi ikkunaan, mutta on vielä parempi ja hyödyllisempi tapa käyttää tätä ominaisuutta. Tätä varten käytämme seuraavaa ominaisuuden ja arvon yhdistelmää:
tausta-koko: kansi;
Kansiomainosominaisuus kertoo selaimesta skaalaavan kuvan soviin ikkunaan riippumatta siitä, kuinka suuri tai pieni ikkuna on. Kuva skaalautuu kattamaan koko näytön, mutta alkuperäiset mittasuhteet ja kuvasuhde pysyvät ennallaan, mikä estää kuvan itsensä vääristymästä.
Kuva asetetaan ikkunaan mahdollisimman suureksi niin, että koko ikkunapinta peitetään. Tämä tarkoittaa, että sivuillasi ei ole tyhjiä pisteitä tai kuvan vääristymiä, mutta se tarkoittaa myös sitä, että osa kuvasta voidaan leikata pois näytön kuvasuhteesta riippuen. Esimerkiksi kuvan reunat (joko ylhäältä, alhaalta, vasemmalta tai oikealta) voidaan katkaista kuvien päälle riippuen siitä, mitkä arvot käytät tausta-aseman ominaisuudelle. Jos suuntaat taustan "ylhäällä vasemmalle", ylimääräinen kuva pääsee pois alhaalta ja oikealta puolelta. Jos keskität taustakuvan, ylimäärä tulee pois kaikista sivuista, mutta koska ylimäärä on levinnyt, vaikutuksen kummallakin puolella on vähemmän.
Kuinka käyttää tausta-kokoa: kansi;
Kun luot taustakuvan, kannattaa luoda melko suuri kuva. Selaimet voivat tehdä kuvan pienemmiksi ilman huomattavaa vaikutusta visuaaliseen laatuun, kun selaus laskee kuvan suurempaan kokoon kuin alkuperäiset mitat, visuaalinen laatu heikkenee, muuttuu epätarkaksi ja kuvapisteiseksi. Haittapuolena tähän on, että sivusi tekee suorituskykyä, kun toimitat jättiläisiä kuvia kaikkiin näyttöihin.
Kun teet tämän, varmista, että nämä kuvat on oikein valmistettu latausnopeuden ja web-toimituksen mukaan . Loppujen lopuksi sinun on löydettävä sopiva keskitaso riittävän suuren koon ja laadun ja kohtuullinen tiedoston koko ladattaville nopeuksille.
Yksi yleisimmistä tavoista käyttää skaalaus taustakuvia on silloin, kun haluat, että kuva ottaa sivun täydellisen taustan riippumatta siitä, onko sivu leveä ja että se katsellaan pöytätietokoneella tai paljon pienempi ja lähetetään kämmenlaitteeseen, mobiiliin laitteet.
Lähetä kuva verkko-isäntänne ja lisää se CSS: ään taustakuvaksi:
taustakuva: url (fireworks-over-wdw.jpg);
tausta-toisto: ei-toista;
tausta-asema: keskusta;
tausta-liite: kiinteä;
Lisää selainkohtainen CSS ensin:
-webkit-tausta-koko: kansi;
-moz-tausta-koko: kansi;
-o-tausta-koko: kansi;
Lisää sitten CSS-ominaisuus:
tausta-koko: kansi;
Käytä erilaisia kuvia, jotka sopivat erilaisiin laitteisiin
Vaikka työpöydän tai kannettavan tietokoneen käyttökokemus on tärkeä, monien laitteiden, jotka voivat käyttää Webiä, on kasvanut huomattavasti, ja näyttökokojen mukana on paljon enemmän.
Kuten aiemmin mainittiin, esimerkiksi suuri älypuhelimelle erittäin reagoiva taustakuvan lataaminen ei ole tehokasta tai kaistanleveyttä tajuavaa muotoilua.
Lue, miten voit käyttää mediakyselyitä näyttääksesi kuvia, jotka sopivat laitteisiin, joihin ne näytetään, ja parantavat verkkosivuston yhteensopivuutta mobiililaitteiden kanssa.
Alkuperäinen artikkeli Jennfier Krynin. Julkaisija Jeremy Girard 12.9.17