Oglejte si priljubljena spletna mesta danes in ena oblika oblikovanja, ki jo boste zagotovo videli, so velike ozadne slike, ki obsegajo zaslon. Eden od izzivov pri dodajanju teh slik izhaja iz najboljše prakse, da se morajo spletna mesta odzivati na različne velikosti zaslona in naprav - pristop, znan kot odzivno spletno oblikovanje.
Ena slika za več zaslonov
Ker se postavitev vašega spletnega mesta spreminja in spreminja z različnimi velikostmi zaslona, morajo tudi te slike v ozadju ustrezno prilagoditi svojo velikost. Pravzaprav so te "tekoče slike" eden ključnih delov odzivnih spletnih mest (skupaj s fluidno mrežo in medijskimi poizvedbami). Ti trije deli so že od samega začetka stalnica odzivnega spletnega oblikovanja, čeprav je bilo odzivno vedno enostavno dodati vstavljene slike na spletno mesto (vstavljene slike so grafike, ki so kodirane kot del oznake HTML), enako pa tudi pri slikah v ozadju (ki so v stran vključeni z lastnostmi ozadja CSS) že dolgo predstavlja velik izziv za številne spletne oblikovalce in prednje strani razvijalci. Na srečo je to omogočil dodatek lastnosti "background-size" v CSS.
V ločenem članku smo opisali, kako uporabljati Velikost ozadja lastnosti CSS3 za raztezanje slik, da se prilegajo oknu, vendar obstaja še boljši, uporabnejši način za razmestitev te lastnosti. Za to bomo uporabili naslednjo kombinacijo lastnosti in vrednosti:
velikost ozadja: naslovnica;
Lastnost ključne besede cover brskalniku pove, da sliko prilagodi oknu, ne glede na to, kako veliko ali majhno je to okno. Slika je pomanjšana tako, da pokriva celoten zaslon, vendar prvotna razmerja in razmerje stranic ostanejo nedotaknjeni, kar preprečuje popačenje same slike. Slika je postavljena v okno čim večje, tako da je prekrita celotna površina okna. To pomeni, da na strani ne boste imeli praznih mest ali popačenja slike, vendar tudi pomeni, da se lahko del slike odreže, odvisno od razmerja stranic zaslona in slike v vprašanje. Robovi slike (zgoraj, spodaj, levo ali desno) so na primer na slikah lahko odrezani, odvisno od vrednosti, ki jih uporabite za lastnost položaja ozadja. Če ozadje usmerite v "zgoraj levo", se odvečni del slike odlepi od spodnje in desne strani. Če sliko ozadja centrirate, se presežek odstrani z vseh strani, a ker se ta presežek razprši, bo učinek na kateri koli strani manjši.
Kako uporabiti 'background-size: cover;'
Pri ustvarjanju slike v ozadju je dobro ustvariti sliko, ki je dokaj velika. Medtem ko lahko brskalniki zmanjšajo sliko brez opaznega vpliva na kakovost slike, ko brskalnik poveča datoteko slike na velikost, večjo od prvotne, se bo vidna kakovost poslabšala, postala zamegljena in pixelated. Slaba stran tega je, da vaša stran doseže uspešnost, ko prikazujete velikanske slike na vse zaslone. Ko to storite, se prepričajte, da ste pravilno pripravite te slike na hitrost prenosa in spletno dostavo. Na koncu morate najti srečni medij med dovolj veliko velikostjo slike in kakovostjo ter razumno velikostjo datoteke za hitrost prenosa.
Eden najpogostejših načinov za spreminjanje slik v ozadju je, če želite, da ta slika zavzame celotno ozadje strani, ali je stran široka in si jo lahko ogledate v namiznem računalniku ali veliko manjša in ali je poslana na ročni mobilni telefon naprav.
Sliko naložite na svojega spletnega gostitelja in jo dodajte v svoj CSS kot sliko za ozadje:
slika ozadja: url (ognjemet-over-wdw.jpg);
background-repeat: no-repeat;
položaj ozadja: sredina sredina;
pritrditev ozadja: fiksno;
Najprej dodajte brskalnik s predpono CSS:
-webkit-background-size: naslovnica;
-moz-velikost ozadja: naslovnica;
-o-velikost-ozadja: naslovnica;
Nato dodajte lastnost CSS:
velikost ozadja: naslovnica;
Uporaba različnih slik, ki ustrezajo različnim napravam
Medtem ko je odzivna zasnova namizja ali prenosnika pomembna, je raznolikost naprav, ki lahko dostopa do spleta, je znatno narasla in je na voljo več različnih velikosti zaslona to.
Kot smo že omenili, na primer nalaganje zelo velike odzivne slike v ozadju na pametni telefon ni učinkovita zasnova ali pasovna širina.
Naučite se, kako lahko uporabljate medijska vprašanja za prikazovanje slik, ki bodo primerne za naprave, v katerih bodo prikazane, in dodatno izboljšati združljivost vašega spletnega mesta z mobilnimi napravami.