„ спритес слике ” је техника у којој се креира једна велика слика која се састоји од више појединачних слика. И било који део велике слике може да се прикаже у односу на захтеве дизајна. Помаже програмерима да глатко граде визуелно привлачне елементе. Спрајтови слика се могу користити за иконе, дугмад и друге графичке елементе. Овај чланак демонстрира поступак корак по корак коришћења спријтова слика у ЦСС-у.
Како користити И маг Спритес у ЦСС-у?
У ЦСС-у, програмери користе спријтове слика да минимизирају/смање време учитавања веб странице. Помаже у смањењу ХТТП захтева, обезбеђује брже учитавање и побољшава фактор корисничког искуства. На пример, посетите пример у наставку:
Пример: Коришћење Имаге Сприте у ставци листе
У овом примеру, креирана је уређена листа и у свакој ставци листе део слике сприте-а се приказује на екрану.
Предуслов:
Да бисте добили специфичну слику из сприте-а слике, димензије сприте-а слике који се користи су посебно важне. На пример, слика која има димензију „ 937×156 “ је приказан испод:
Пратите доле наведене кораке да бисте приказали део горе приказане слике:
Корак 1: Креирање ставки листе
Неуређена листа се генерише на веб страници, као што се види у доњем исечку кода:
< ул >Празно: < то ид = 'празно' > то >
половина: < то ид = 'пола' > то >
Пуно: < то ид = 'пун' > то >
ул >
Опис горњег исечка кода:
-
- Прво, користите „ <ул> ” да бисте креирали контејнер/окружење за „ неуређена листа ” и креирајте три ставке листе користећи „ <то> ” ознака.
- Затим доделите ИД-ове „ празан ”, “ пола ' и ' пуна ” за три ставке листе. Они се касније користе за приказ дела веће слике.
Корак 2: Приказ прве слике
За приказ празног срца на веб страници која је прва слика у сприте-у слике. Користити ' празан ” ид и убаците следећи код:
#емпти {ширина: 157пк;
висина: 150пк;
позадина: урл ( .. / сприте.јпг ) 0 0 ;
}
У горњем реду кодова:
-
- Прво поставите „ ширина ' и ' висина ” слике коју програмер жели да прикаже на веб страници.
- Ова својства су додељена вредностима „ 157пк ' и ' 150пк ” према горе наведеном примеру, али могу да варирају у односу на слике различитих димензија.
- Затим наведите путању „ сприте ” слику на „ позадини ' имовина. Сада поставите правац „ 0 ' и ' 0 ” и приказује први део спрајта слике.
Након извршења горње линије кода, веб страница изгледа овако:
Горњи снимак показује да се прва слика из спрајта слике приказује на веб страници.
Корак 3: Приказ средње и последње слике
Да бисте приказали средњи и последњи део слике из спрајта слике, уметните следећа ЦСС својства:
#пола {ширина: 157пк;
висина: 150пк;
позадина: урл ( .. / сприте.јпг ) -462пк 0пк
}
#фулл {
ширина: 157пк;
висина: 150пк;
позадина: урл ( .. / сприте.јпг ) -770пк 0пк
}
Опис горњег исечка кода:
-
- Прво изаберите „ пола ” ид и убаците иста ЦСС својства која су коришћена у горњем кораку.
- Да бисте приказали средњу слику из спрајта слике, промените правац или доделите паддинг са леве стране. На пример, смер са леве стране је подешен на „ негативних 462пк ”.
- На исти начин, прикажите последњу слику тако што ћете поставити смер са леве на „ -770пк ”.
Након извршења горе наведених ЦСС својстава, веб страница изгледа овако:
Горњи снимак показује да су три слике из спрајта слике приказане на веб страници.
Закључак
„ спритес слике ” је једна велика слика која се састоји од више мањих слика, баш као и функција колажа. И било који део велике слике који представља мању слику може бити приказан. Према захтевима коришћењем „ позадини ” својство које обезбеђује ЦСС. Да бисте приказали одређену слику из сприте-а слике, прво подесите ширину и висину слике. Након тога, користите вредности смерова да бисте приказали само део слике из спрајта слике.