cSS sprite

Az egyik legfontosabb feladat az, hogy a CSS sprite, hogy optimalizálja az oldalon letölthető grafika. Mi a célja ennek az optimalizálás és miért van szükség, hogy végre? Az ötlet a következő: amíg az oldal nem optimalizált, grafikai elemek külön fájlba kerülnek. Ezeknek az összege meghaladja az 5 elem vagy 10 darab, ebből következően annak érdekében, hogy töltse be az egyes kép, a böngésző egy külön kérelmet.

Logikus feltételezni, hogy felgyorsíthatja a folyamatot kombinálásával grafikai elemekkel. Kijelzők gyakran jönnek létre a CSS. A böngésző hajtja végre csak egy kérés, hogy töltse le a képeket. Ennek köszönhetően a betöltődik sokkal gyorsabb. Ez az egész elvét optimalizálás.

Emellett sprite használnak annak érdekében, hogy pontos helyzetbe a vizuális hatás elem változást, amikor a felhasználó mozgatja a kurzort. Ennek hiányában a látható, amikor egy látogató látja a villogó gomb: a gomb két állam - az eredeti és abban a pillanatban útmutatást, a rakodási e feltételek hiányában a szervezet nem túl hosszú szünet, mert mi történik villogó hatást.

Így figyelembe vesszük a főbb példái CSS sprite:

Van egy lista ikonok egy fájlban. A feladat: hogy néhány képet a sorrendben, véletlenszerűen.

Wallpaper (css-sprite-01.png) alatti - Sprite.

Alkalmazása után a lista stílusú ikonok származnak bármilyen sorrendben.

Nézzük megérteni részletesebben erre a példára. Az eredeti kép felbontása sprite: 200 * 200 px. Fő kép van osztva 4 darab, amelyek mindegyike a felbontása 100 x 100 képpont. Létre kell hoznunk a dokumentumok listáját egy azonosítóval css-sprite-ul. A lista elemei számozva, mint a 001, 002, 003, stb