Katso suosittuja verkkosivustoja tänään ja yksi suunnitteluhoito, jonka olet varma nähdä, on suuret, näyttöä ulottuvat taustakuvat. Yksi näiden kuvien lisäämisen haasteista tulee parhaasta käytännöstä, jonka mukaan verkkosivustojen on vastattava erilaisiin ruuduihin ja laitteisiin - tämä menetelmä tunnetaan nimellä reagoiva web-suunnittelu.
Yksi kuva monille näytöille
Koska verkkosivustosi ulkoasu muuttuu ja skaalautuu erikokoisilla näytöillä, myös näiden taustakuvien on skaalattava kokoa vastaavasti. Itse asiassa nämä "sujuvat kuvat" ovat yksi avaintekijöistä reagoiville verkkosivustoille (yhdessä nesteverkon ja mediakyselyjen kanssa). Nämä kolme kappaletta ovat olleet keskeinen osa reagoivaa verkkosuunnittelua alusta alkaen, mutta vaikka reagoivan lisääminen on aina ollut melko helppoa inline-kuvat sivustoon (inline-kuvat ovat grafiikkaa, jotka koodataan osana HTML-merkintää), samalla tavalla taustakuvien kanssa (jotka on muotoiltu sivulle CSS-taustaominaisuuksien avulla) on jo pitkään tarjonnut merkittävän haasteen monille web-suunnittelijoille ja käyttöliittymälle kehittäjät. Onneksi "taustakokoisen" ominaisuuden lisääminen CSS: ään on mahdollistanut tämän.
Erillisessä artikkelissa käsiteltiin miten CSS3-ominaisuuden taustakoko venyttää kuvia ikkunaan sopiviksi, mutta tälle omaisuudelle on vielä parempi, hyödyllisempi tapa ottaa käyttöön. Tätä varten käytämme seuraavia ominaisuus- ja arvoyhdistelmiä:
taustakoko: kansi;
Kannen avainsanan ominaisuus käskee selainta skaalaamaan kuvan ikkunaan sopivaksi riippumatta siitä, kuinka suuri tai pieni ikkuna tulee. Kuva skaalataan kattamaan koko näyttö, mutta alkuperäiset mittasuhteet ja kuvasuhde pidetään ennallaan, mikä estää kuvan vääristymisen. Kuva sijoitetaan ikkunaan mahdollisimman suureksi siten, että koko ikkunan pinta on peitetty. Tämä tarkoittaa, että sivullasi ei ole tyhjiä paikkoja tai vääristymiä kuvassa, mutta myös tarkoittaa, että osa kuvasta voidaan leikata pois riippuen näytön kuvasuhteesta ja kuvasta kysymys. Esimerkiksi kuvan reunat (joko ylhäältä, alhaalta, vasemmalta tai oikealta) voidaan leikata kuvista riippuen siitä, mitä arvoja käytät tausta-sijainti-ominaisuudelle. Jos suuntaat taustan "ylhäältä vasemmalle", ylimääräinen kuva tulee irti ala- ja oikealta puolelta. Jos keskität taustakuvan, ylimäärä tulee irti kaikilta puolilta, mutta koska ylimäärä on levinnyt, vaikutus jommallekummalle puolelle on vähemmän palveleva.
Kuinka käyttää 'background-size: cover;'
Kun luot taustakuvaa, on hyvä luoda kuva, joka on melko suuri. Selaimet voivat pienentää kuvaa ilman huomattavaa vaikutusta visuaaliseen laatuun, kun selain suurentaa kuvan alkuperäiseen mittaan suurempaan kokoon, visuaalinen laatu heikkenee, tulee epäselväksi ja pikseloitu. Tämän haittapuoli on, että sivusi saa suorituskyvyn, kun toimitat jättimäisiä kuvia kaikille näytöille. Kun teet tämän, varmista oikein valmistele nämä kuvat lataamisnopeutta ja verkkojakelua varten. Loppujen lopuksi sinun on löydettävä onnellinen väline riittävän suuren kuvan koon ja laadun sekä kohtuullisen tiedostokoon välillä latausnopeutta varten.
Yksi yleisimmistä tavoista käyttää taustakuvien skaalausta on, kun haluat kuvan ottavan sivun koko taustan, onko kyseinen sivu leveä ja katsottava pöytätietokoneella vai paljonko pienempi ja lähetetäänkö se kämmenlaitteeseen, matkapuhelimeen laitteet.
Lähetä kuvasi verkkopalveluun ja lisää se CSS: ään taustakuvana:
taustakuva: url (ilotulitus yli-wdw.jpg);
tausta-toisto: ei-toista;
taustan sijainti: keskikohta;
taustakiinnitys: kiinteä;
Lisää ensin selaimen etuliite CSS:
-webkit-background-size: kansi;
-moz-background-size: kansi;
-o-taustakoko: kansi;
Lisää sitten CSS-ominaisuus:
taustakoko: kansi;
Eri laitteille sopivien kuvien käyttäminen
Vaikka reagoiva suunnittelu työpöydälle tai kannettavaan tietokoneeseen on tärkeää, laitteiden monipuolisuus verkkoon pääsy on kasvanut merkittävästi, ja mukana tulee enemmän erilaisia näyttökokoja että.
Kuten aiemmin mainittiin, erittäin suuren reagoivan taustakuvan lataaminen esimerkiksi älypuhelimeen ei ole tehokas tai kaistanleveystietoinen muotoilu.
Opi kuinka voit käyttää mediakyselyt palvelemaan kuvia, jotka sopivat näytettäviin laitteisiin, ja parantamaan edelleen verkkosivustosi yhteensopivuutta mobiililaitteiden kanssa.