Ötvözi több képet egy sprite css

előző ◈ a következő

Ötvözi több képet egy sprite css

Keverjük össze képeket CSS sprite-

Az igény, hogy egyesítsen kép egyetlen CSS sprite hozzám belső honlap optimalizálás. Egyesítheted kép egyetlen kobold szempontjából optimalizálás egy nagyon fontos lépés, mert a felhasználó böngészője kér csak egyetlen képet a szerver helyett több. Ahelyett, hogy több tucat kéréseket a szerver, a böngésző elküldi csak egy vizsgálatot, és kap csak egy kép, amely tárolja a cache a számítógép. Minden ezt követő kép, akkor húzza ki ez a szellem nem utal a szerverre. Ha a sprite fekete két oldalát:

  • A felhasználó kap egy gyors nyitó oldala.
  • A webmester úgy csökkenti a terhelést a szerveren.

Létrehozása a CSS sprite

  1. Letölteni a számítógépre az összes kis képek, amelyek használják a tervezés a webhelyen.
  2. Ennek alapján a hozzávetőleges mérete a kép, akkor jobb, hogy állítsa be a szélességét és magasságát a munkaterületre. Ehhez kattintson SpriteMap -> MapSize. Ezután a kép szélességét és hosszát pixelben.
  3. Drag and drop egyenként az összes képet a munkaterületen. Húzása minden kép Rendezze őket oly módon, hogy sem a képek nem fut egymás ellen. És kívánatos, hogy a veszteségek minimalizálása, vagyis próbálja meg rendezni a legkisebb terület, mint egy extra kilobájt nekünk semmit.
  4. Amikor az összes kép adunk kattintson Fit Documemts. Ez a gomb automatikusan megszakítja a fel nem használt terület, így nem kell félni a második bekezdésben jelzik egy nagy terület.
  5. Mindezek után, kattintson a Letöltés gombra. Cserébe kap az archívumot, amely a CSS-sprite PNG formátumban. Amellett, hogy az archív található a CSS fájlt, ami tartalmazza az összes fontos információ: a koordinátákat a kezdete a kép szélessége és hossza. Ez a szolgáltatás létrehozásához sprite már megtette a funkcióját, de én nem ajánlom, hogy lezárja.
  6. A kapott sprite, az egyik a PNG formátumban, add, hogy a honlapon keresztül FTP-szerver, vagy más download manager. Csak tartsa a file elérési útvonalát.
  7. Ezután meg kell beavatkozni a kód maga a design a webhelyen. Lehet, hogy két lehetőség:
    1. A fényképek hozzá tervezés révén CSS fájlban.
    2. A kép felkerül a tervezés HTML-címke .
  8. A második esetben, kérjük, olvassa el az előző bejegyzést, hogy hogyan adhat képet a CSS segítségével. Amikor az összes kép bekerül a tervezéstől a CSS. Mehetsz a következő lépésre.
  9. És a következő bekezdésben fogom leírni az alábbiakban.

Add meg logo design CSS sprite

Például, hogy egy példát az előző post:

Ez a CSS fájlban egység határozza meg a helyét a logó mind ugyanazon a helyszínen. Itt látható az eredeti változat, hogy használja a Sprite. Mint látható, van feltüntetve logo.png képet. Csak adja meg a hosszát és szélességét, a képet. Meg kell ezt a blokkot egy kicsit módosítva, hogy ilyen állapotban:

Ez az út történik, hogy több kép egy CSS sprite. Az egyetlen dolog, amit szeretnék, hogy figyelmeztessen: a sprite csak állóképeket. Segítségével sprite dinamikus képeket egy kicsit nehezebb, írok róla később. Közben tartsa szem előtt, ha a kép mellett helyét a megadott no-repeat. akkor minden rendben van. És ha a megadott repeat-x vagy repeat-y. nem tartalmazzák azokat a fő sprite.

Kattints, ha tudtam segíteni

  • Ötvözi több képet egy sprite css

Hogyan lehet csökkenteni (compress) CSS?

  • Ötvözi több képet egy sprite css

    Hogyan lehet optimalizálni a képek?

  • Ötvözi több képet egy sprite css

    Hogyan adjunk egy képet a CSS segítségével, és ez egy link?

  • Ötvözi több képet egy sprite css

    Statikus nyomás .css és Js-fájlok

  • Ötvözi több képet egy sprite css

    Eltávolítása a query string az URL statikus erőforrások

  • Ötvözi több képet egy sprite css

    A Windows Management Certificate

  • Ötvözi több képet egy sprite css
  • Ötvözi több képet egy sprite css

    Hogyan lehet másolni a szöveget a biztonságos oldalon

    Kapcsolódó cikkek

    • előző ◈ a következő