Tukaj je, kako dodati odzivne oblikovne slike z uporabo CSS
Oglejte si priljubljene spletne strani danes in eno oblikovanje zdravljenja, ki ste prepričani, da vidite, je veliko zaslonskih slik. Eden od izzivov z dodajanjem teh slik izhaja iz najboljše prakse, ki jo morajo spletne strani odzvati na različne velikosti in naprave zaslona - pristop, ki se imenuje odzivno spletno oblikovanje .
Ker se postavitev vašega spletnega mesta spreminja in razteza z različnimi velikostmi zaslona, morajo tudi te slike v ozadju ustrezno prilagoditi njihovo velikost.
Dejansko so ti "tekočinski posnetki" eden od ključnih delov odzivnih spletnih strani (skupaj s tekočo mrežo in mediji). Ti trije deli so bili od začetka odzivnega spletnega oblikovanja, vendar pa je bilo na spletnem mestu vedno naenkrat mogoče enostavno dodati odzivne inline slike (risbe, ki so kodirane kot del oznake HTML), enako s slikami v ozadju (ki so oblikovane na stran z lastnostmi ozadja CSS) je že dolgo pomenilo velik izziv za mnoge spletne oblikovalce in razvijalce sprednje strani. K sreči je to omogočilo dodajanje lastnosti »velikosti ozadja« v CSS.
V ločenem članku sem zajemal, kako uporabljati velikost ozadja lastnosti CSS3, da raztegnem slike, da se prilega oknu, vendar pa je za to lastnost še bolj uporaben način. Za to bomo uporabili naslednjo kombinacijo lastnosti in vrednosti:
velikost ozadja: pokrov;
Lastnost ključne besede pokrova pove brskalniku, da sliko prilagodi oknu, ne glede na to, kako veliko ali majhno je to okno. Podoba je pomanjšana za pokritje celotnega zaslona, vendar prvotne razmerja in razmerje slike ostanejo nedotaknjene, kar preprečuje popačenje slike.
Slika je postavljena v okno čim večje, da je pokrita celotna površina oken. To pomeni, da na svoji strani ne boste imeli nobenih praznih pik ali kakršne koli izkrivljanja na sliki, ampak tudi to pomeni, da je lahko nekaj slik obrezano, odvisno od razmerja slike na zaslonu in zadevne slike. Na sliki lahko na primer robove slike (zgoraj, spodaj, levo ali desno) odrežite, odvisno od tega, katere vrednosti uporabite za lastnost pozicije. Če usmerite ozadje v "zgoraj levo", se bo kakršen koli presežek na sliki spustil s spodnje in desne strani. Če osredotočite sliko v ozadju, se bo presežek z vseh strani obrnil, toda ker se ta presežek razprostira, bo vpliv na katerikoli strani manjši.
Kako uporabljati ozadje: pokrov;
Ko ustvarjate sliko v ozadju, je dobra stvar ustvariti podobo, ki je precej velika. Medtem ko lahko brskalniki naredijo sliko manjšo brez opaznega vpliva na vizualno kakovost, ko brskalnik razširi sliko na velikost, ki je večja od prvotne dimenzije, se bo vizualna kakovost poslabšala, postala zamegljena in osvetljena. Slaba stran tega je, da vaša stran doseže uspešnost, ko prinašate velikanske slike vsem platnima.
Ko to storite, se prepričajte, da ste pravilno pripravili te slike za hitrost prenosa in spletno dostavo . Na koncu morate najti srečni medij med veliko velikostjo slike in kakovostjo ter razumno velikostjo datoteke za hitrosti prenosa.
Eden od običajnih načinov uporabe povečanih slik v ozadju je, če želite, da ta slika zajame celotno ozadje strani, ali je ta stran široka in jo gledate na namiznem računalniku ali pa je precej manjša in jo pošljete v ročno, mobilno naprave.
Prenesite sliko na spletnega gostitelja in jo dodajte v svoj CSS kot sliko v ozadju:
ozadje-slika: url (fireworks-over-wdw.jpg);
ozadje-ponavljajoče: brez ponavljanja;
background-position: center center;
background-attachment: fiksno;
Najprej dodajte brskalnik predfiksiran CSS:
-webkit-background-size: naslovnica;
-moz-ozadje-velikost: pokrov;
-o-ozadje: velikost;
Nato dodajte lastnost CSS:
velikost ozadja: pokrov;
Uporaba različnih slik, ki ustrezajo različnim napravam
Medtem ko je odzivna zasnova za namizno ali prenosno izkušnjo pomembna, je raznolikost naprav, ki imajo dostop do spleta, znatno narasla in pri tem prihajata večja velikost zaslona.
Kot že omenjeno, na primer naložitev zelo velike odzivne slike v ozadju na pametni telefon ni učinkovita ali pasivna oblika.
Preberite več o tem, kako lahko uporabite medijske poizvedbe za prikazovanje slik, ki bodo ustrezale napravam, na katerih bodo prikazane, in nadalje izboljšajte združljivost vaše spletne strani z mobilnimi napravami.
Izvorni članek Jennfierja Krynin. Uredil Jeremy Girard 9.12.17