Jen kiel aldoni respondema dezajno bildoj uzante CSS
Rigardu popularajn retejojn hodiaŭ kaj unu dezajno, kiun vi certas, estas granda, ekrano-kovranta fono-bildojn. Unu el la defioj kun aldono de ĉi tiuj bildoj venas de la plej bonaj praktikoj, kiujn retejoj devas respondi al malsamaj ekrano grandecoj kaj aparatoj - aliro konata kiel respondema retejo .
Ĉar la aranĝo de via retejo ŝanĝas kaj skalojn kun malsamaj ekrano grandecoj, do ankaŭ ĉi tiuj fono-bildoj disvastigu sian grandecon laŭe.
Fakte, ĉi tiuj "fluaj bildoj" estas unu el la ŝlosilaj pecoj de respondemaj retejoj (kune kun fluida krado kaj amaskomunikiloj). Tiuj tri pecoj estis ĉefrolulo de respondemaj dezajno retejo ekde la komenco, sed dum ĝi ĉiam estis sufiĉe facile aldoni respondajn inlineajn bildojn al retejo (enlinaj bildoj estas la grafikaĵoj koditaj kiel parto de la HTML-marko), farante la samaj kun fono bildoj (kiuj estas stiligitaj en la paĝon uzante CSS-fono-posedaĵojn) longe provizis gravan defion al multaj retejo-projektistoj kaj antaŭaj programistoj. Dankeme, la aldono de la "fono-grandeco" propraĵo en CSS faris ĉi ebla.
En aparta artikolo, mi kovris kiel uzi la CSS3-posedaĵon-fonon por streĉi bildojn por ĝustigi en fenestro, sed ekzistas eĉ pli bona, pli utila maniero deplodi por ĉi tiu propraĵo. Por tio, ni uzos la jenan proprieton kaj valora kombinaĵon:
fono-grandeco: kovrilo;
La proprieta ŝlosilvorto proponas al la retumilo skalon la bildon por ĝustigi la fenestron, sendepende de kiom granda aŭ malgranda tiu fenestro ricevas. La bildo estas skalo por kovri la tutan ekranon, sed la originalaj proporcioj kaj aspekto-rilatoj estas nerompitaj, evitante la bildon mem esti distorsita.
La bildo situas en la fenestro kiel eble plej granda por ke la tuta fenestra surfaco estas kovrita. Ĉi tio signifas, ke vi ne havos neniujn malplenajn makulojn en via paĝo aŭ ia distordo sur la bildo, sed ankaŭ signifas, ke iuj el la bildo povas esti eltondita laŭ la aspekto de la ekrano kaj la bildo en demando. Ekzemple, la randoj de bildo (ĉu supro, malsupro, maldekstre aŭ dekstra) povas esti malplenigitaj sur la bildoj, laŭ kiuj valoroj vi uzas por la posedaj posedaĵoj. Se vi orientas la fonon al "supro maldekstre", ajna troo sur la bildo eliros el la fundo kaj dekstra flankoj. Se vi centras la fonan bildon, la troo elspezos de ĉiuj flankoj, sed ĉar tiu troo disvastiĝos, la efiko sur unu flanko estos malpli servata.
Kiel Uzi fono-grandeco: kovrilo;
Kiam vi kreas vian fonan bildon, estas bona ideo krei bildon, kiu estas sufiĉe granda. Dum la retumiloj povas fari bildon pli malgrandan sen rimarkinda efiko sur vida kvalito, kiam retumilo skuas bildon al pli granda grandeco ol la originalaj dimensioj, la vida kvalito estos degradita, fariĝanta neklara kaj pixelatigita. La malfacilaĵo al ĉi tio estas, ke via paĝo okupas efikecon kiam vi liveras gigajn bildojn al ĉiuj ekranoj.
Kiam vi faras ĉi tion, certigu konvene prepari tiujn bildojn por elŝuta rapido kaj retpaŝado . Al la fino, vi devas trovi feliĉan rimedon inter ampleksa grandeco kaj kvalito de bildoj kaj racia grandeco de dosieroj por malŝarĝoj.
Unu el la komunaj manieroj de uzado de grimpaj fono-bildoj estas kiam vi volas ke tiu bildo prenu la plenan fonon de paĝo, ĉu tiu paĝo estas larĝa kaj vidata sur labortabla komputilo aŭ multe pli malgranda kaj estas sendata al portebla telefono aparatoj.
Alŝutu vian bildon al via retejo-gastiganto kaj aldonu ĝin al via CSS kiel fono-bildon:
fono-bildo: url (fireworks-over-wdw.jpg);
fono-ripeto: ne-ripeto;
fono-pozicio: centrocentro;
fono-alligiteco: fiksita;
Aldonu la retumilo antaŭprogramita CSS unua:
-webkit-background-size: cover;
-moz-fono-grandeco: kovrilo;
-o-fono-grandeco: kovrilo;
Tiam aldonu la CSS-posedaĵon:
fono-grandeco: kovrilo;
Uzanta Malsamajn Bildojn Kiuj Suitaj Variaj Diskoj
Dum respondema dezajno por labortablo aŭ portebla sperto estas grava, la vario de aparatoj, kiuj povas aliri la retejon kreskis signife, kaj pli granda vario de ekranecimoj venas kun tio.
Kiel antaŭe menciite, ŝarĝante tre grandan respondema fono-bildon sur inteligenta telefono, ekzemple, ne estas efika aŭ bandwid-konscia dezajno.
Lernu kiel vi povas uzi amaskomunikilajn demandojn por servi bildojn, kiuj taŭgas al la aparatoj, kiujn ili montros kaj plibonigos la kongruon de via retejo kun moveblaj aparatoj.
Originala artikolo de Jennfier Krynin. Redaktita de Jeremy Girard 9/12/17