Hawnhekk għandek issib kif għandek żżid immaġini ta 'disinn li jirrispondu bl-użu tas-CSS
Ħares lejn il-websajts popolari llum u trattament ta 'disinn wieħed li tkun żgur li tara huwa kbir, immaġini fl-isfond li jkopru l-iskrin. Waħda mill-isfidi billi żżid dawn l-immaġini ġejja mill-aħjar prattika li l-websajts għandhom jirrispondu għal daqsijiet u apparati ta 'skrin differenti - approċċ magħruf bħala disinn web li jirrispondi .
Peress li l-bidliet u l-iskali tat-tqassim tal-websajt tiegħek b'daqsijiet differenti ta 'skrin, hekk ukoll dawn l-immaġnijiet fl-isfond għandhom id-daqs tagħhom kif xieraq.
Fil-fatt, dawn l- "immaġini fluwidi" huma wieħed mill-biċċiet ewlenin ta 'websajts li jirrispondu (flimkien ma' mistoqsijiet dwar grids u medja tal-fluwidi). Dawk it-tliet biċċiet kienu staple ta 'disinn tal-web li jirrispondu mill-bidu, iżda filwaqt li minn dejjem kien faċli biex iżżid immaġini inline li jirrispondu għal sit (immaġini inline huma l-grafika li huma kkodifikati bħala parti mill-markup HTML), billi jagħmlu l- istess ma 'stampi ta' sfond (li huma mmarkati fil-paġna bl-użu ta 'proprjetajiet ta' sfond CSS) ilhom jipprovdu sfida sinifikanti lil bosta disinjaturi tal-web u żviluppaturi ta 'faċċata. B'xorti tajba, iż-żieda tal-proprjetà ta '"daqs ta' sfond" fis-CSS għamlet dan possibbli.
F'artikolu separat, kopjajt kif tuża d-daqs ta 'l-isfond tal-proprjetà CSS3 biex testendi l-immaġini biex taqbel ma' tieqa, iżda hemm ukoll aħjar, aktar mod utli biex tuża din il-proprjetà. Biex tagħmel dan, se nużaw il-proprjetà u l-kombinazzjoni tal-valur li ġejjin:
daqs ta 'l-isfond: kopertura;
Il-proprjetà ta 'kopertura ta' keyword tgħid lill-browser biex teskala l-immaġini biex taqbel mat-tieqa, irrispettivament minn kemm tkun kbira jew żgħira dik it-tieqa. L-immaġni hija skalata biex tkopri l-iskrin kollu, iżda l-proporzjonijiet oriġinali u l-proporzjon ta 'l- aspett jinżammu intatti, u ma jħallux li l-immaġni nnifisha tiġi distorta.
L-immaġini titqiegħed fit-tieqa kemm jista 'jkun kbira sabiex il-wiċċ kollu tat-tieqa jkun kopert. Dan ifisser li ma jkollokx spots vojta fil-paġna tiegħek jew xi distorsjoni fuq l-immaġni, iżda jfisser ukoll li xi wħud mill-immaġini jistgħu jiġu mirquma skont il-proporzjon tal-aspett tal-iskrin u l-immaġini inkwistjoni. Per eżempju, it-truf ta 'immaġni (jew fuq, qiegħ, xellug, jew fuq il-lemin) jistgħu jinqatgħu fuq l-immaġni, skond liema valuri tuża għall-proprjetà ta' pożizzjoni ta 'l-isfond. Jekk jorjentaw l-isfond għal "fuq ix-xellug", kull eċċess fuq l-immaġni se joħroġ mill-ġnub tal-qiegħ u tal-lemin. Jekk inti tiċċentra l-immaġni ta 'sfond, l-eċċess se joħroġ mill-ġnub kollha, iżda peress li dak l-eċċess jinfirex, l-impatt fuq naħa waħda se jkun inqas tajbin.
Kif għandek tuża daqs ta 'l-isfond: ikopru;
Meta toħloq l-immaġni ta 'sfond tiegħek, hija idea tajba li toħloq stampa pjuttost kbira. Filwaqt li l-browsers jistgħu jagħmlu immaġini iżgħar mingħajr impatt notevoli fuq il-kwalità viżiva, meta l-browser iwassal immaġni għal daqs ikbar mid-dimensjonijiet oriġinali tiegħu, il-kwalità viżiva tkun degradata, tinħass u pixelata. L-iżvantaġġ għal dan huwa li l-paġna tiegħek tieħu hit ta 'prestazzjoni meta tkun qed twassal immaġini ġganti lill-iskrins kollha.
Meta tagħmel dan, kun żgur li tħejji dawk l-immaġnijiet kif suppost biex tniżżel il-veloċità u t-twassil tal-web . Fl-aħħar, għandek issib il-mezz kuntenti bejn id-daqs u l-kwalità ta 'immaġni ta' daqs kbir u daqs tal-fajl raġonevoli għal veloċitajiet ta 'tniżżil.
Wieħed mill-modi komuni biex juża stampi ta 'sfond ta' sfond huwa meta trid dik l-immaġni biex tieħu l-isfond sħiħ ta 'paġna, kemm jekk dik il-paġna hija wiesgħa u jekk tarah fuq kompjuter desktop jew ħafna iżgħar u qed tintbagħat lil kompjuter li jinżamm fl-idejn, mobbli apparat.
Tella l-immaġni tiegħek lill-web host tiegħek u żżidha mas-CSS tiegħek bħala immaġni ta 'sfond:
immaġni ta 'sfond: url (fireworks-over-wdw.jpg);
irrepeti l-isfond: le-irrepeti;
pożizzjoni tal-isfond: ċentru taċ-ċentru;
twaħħil ta 'l-isfond: fiss;
Żid il-browser prefixizzat CSS l-ewwel:
-webkit-background-size: kopertura;
-moz-background-size: kopertura;
-o-background-size: kopertura;
Imbagħad żid il-proprjetà CSS:
daqs ta 'l-isfond: kopertura;
Użu ta 'Images Differenti li jħaddmu Mezzi Varju
Filwaqt li d-disinn li jirrispondi għal esperjenza ta 'desktop jew laptop huwa importanti, il-varjetà ta' apparati li jistgħu jaċċessaw il-Web kibret b'mod sinifikanti u hemm varjetà ikbar ta 'daqsijiet ta' l-iskrin.
Kif issemma qabel, it-tagħbija ta 'immaġini ta' sfond li tirreaġixxi ħafna fuq smartphone, pereżempju, mhijiex disinn konxju effiċjenti jew bandwidth.
Tgħallem kif tista 'tuża mistoqsijiet tal-midja biex isservi immaġini li tkun xierqa għall-apparati li se jintwerew fuqhom, u ttejjeb aktar il-kompatibilità tal-websajt tiegħek ma' apparat mobbli.
Artikolu oriġinali minn Jennfier Krynin. Editjat minn Jeremy Girard 9/12/17