Ево како додати одговарајуће дизајнерске слике користећи ЦСС
Погледајте популарне веб странице данас и један дизајн третмана који сте сигурни да видите је велика слика заслона која обухвата екран. Један од изазова са додавањем ових слика долази од најбоље праксе да веб странице морају да одговоре на различите величине и уређаје екрана - приступ познат као одговарајући веб дизајн .
Будући да се изглед вашег веб сајта мења и мери са различитим величинама екрана, такође, ове слике у позадини морају смањити њихову величину.
Заправо, ове "слике флуида" су један од кључних комада одговарајућих веб страница (заједно са флуидном мрежом и медијским упитима). Ова три комада су од почетка била главна решетка веб дизајна, али иако је увек било прилично лако додати одговарајуће инлине слике на веб локацију (слике су графике које су кодиране као дио ХТМЛ ознаке), исто са позадинским сликама (које су створене на страници помоћу ЦСС особина) већ дуго представља значајан изазов многим веб дизајнерима и предњој страни програмера. Срећом, додавање имовине "позадинске величине" у ЦСС омогућило је то.
У посебном чланку, покривала сам како да користим величину позадине величине ЦСС3 како би се растезале слике које се уклапају у прозор, али постоји и још бољи, кориснији начин за размјену за ову особину. Да бисмо то урадили, користићемо следећу комбинацију својстава и вредности:
бацкгроунд-сизе: цовер;
Својство насловне кључне речи говори претраживачу да скали слику како би се уклапао у прозор, без обзира на то колико велики или мали прозор добија. Слика је скалирана да покрије цео екран, али оригиналне пропорције и размера остају неоштећене, спречавајући да се сама слика искриви.
Слика се поставља у прозор што је више могуће, тако да је покривена целокупна површина прозора. То значи да на вашој страници неће бити празних места или било какве изобличености на слици, али то такође значи да се неке слике могу одрезати у зависности од односа екрана и слике у питању. На примјер, ивице слике (горње, доње, лијево или десно) могу се прекинути на сликама, зависно од тога које вриједности користите за својство позадине. Ако оријентишете позадину на "горње лево", сваки вишак на слици ће се десити са доње и десне стране. Ако центрирате позадинску слику, вишак ће се искочити са свих страна, али пошто је тај вишак распрострањен, утицај на било којој страни ће бити мање сервисиран.
Како користити величину позадине: поклопац;
Када креирате слику у позадини, добра је идеја да направите слику која је прилично велика. Док прегледачи могу учинити слику мања без видљивог утицаја на визуелни квалитет, када прегледач размакне слику на величину већу од оригиналних димензија, визуелни квалитет ће бити деградиран, постао замућен и пикселиран. Недостатак за ово је да ваша страница узима перформансе приликом додавања великих слика на све екране.
Када ово урадите, уверите се да правилно припремите те слике за брзину преноса и достављање веба . На крају морате пронаћи срећни медиј између довољно велике величине и квалитета слике и разумне величине датотеке за брзине преноса.
Један од уобичајених начина за кориштење скалирања слике у позадини је када желите да слика преузме пуну позадину странице, без обзира да ли је та страница широка и која се гледа на десктоп рачунало или много мања и која се шаље на ручни, мобилни уређаји.
Отпремите вашу слику на веб хост и додајте га у свој ЦСС као позадинску слику:
бацкгроунд-имаге: урл (фиреворкс-овер-вдв.јпг);
бацкгроунд-репеат: но-репеат;
позадинско позиције: центар центра;
бацкгроунд-аттацхмент: фиксно;
Прво додајте прегледач префиксиран ЦСС:
-вебкит-бацкгроунд-сизе: цовер;
-моз-бацкгроунд-сизе: цовер;
-о-бацкгроунд-сизе: цовер;
Затим додајте свој ЦСС својство:
бацкгроунд-сизе: цовер;
Користећи различите слике које одговарају различитим уређајима
Мада је одговарајући дизајн за десктоп или лаптоп искуство важан, разноврсност уређаја који могу приступити Вебу значајно су порасла, а тиме и већи број величина екрана.
Као што је раније речено, учитавање веома великог одзивног позадинског слике на паметном телефону, на примјер, није ефикасан дизајн који је свјесан пропусности.
Сазнајте како можете да користите медијске упите да бисте приказали слике које ће одговарати уређајима на којима ће бити приказане и додатно побољшати компатибилност вашег веб сајта са мобилним уређајима.
Оригинални чланак Јеннфиер Кринин. Уредио Јереми Гирард 9.12.17