A ' kép sprite ” egy olyan technika, amellyel egyetlen nagy kép jön létre, amely több különálló képből áll. És a nagy kép bármely része megjeleníthető a tervezési követelményekhez képest. Segít a fejlesztőknek a látványos elemek zökkenőmentes megépítésében. A kép sprite-ok ikonokhoz, gombokhoz és egyéb grafikus elemekhez használhatók. Ez a cikk lépésről lépésre bemutatja a kép sprite-ok használatát a CSS-ben.
Hogyan kell használni I mage Sprite a CSS-ben?
A CSS-ben a fejlesztők kép sprite-okat használnak a weboldal betöltési idejének minimalizálására/csökkentésére. Segít csökkenteni a HTTP kéréseket, gyorsabb betöltést biztosít, és javítja a felhasználói élményt. Például nézze meg az alábbi példát:
Példa: Az Image Sprite használata a listaelemben
Ebben a példában egy rendezett lista jön létre, és minden listaelemben megjelenik a képernyőn a sprite kép egy része.
Előfeltétel:
Ahhoz, hogy a kép sprite-ból megkapjuk a konkrét képet, különösen fontosak a használt kép sprite méretei. Például az a kép, amelynek mérete „ 937×156 ” lent látható:
Kövesse az alábbi lépéseket a fent megjelenített kép egy részének megjelenítéséhez:
1. lépés: Listaelemek létrehozása
A rendezetlen lista a weboldalon jön létre, amint az az alábbi kódrészleten látható:
< ul >Üres: < hogy id = 'üres' > hogy >
Fél: < hogy id = 'fél' > hogy >
Teljes: < hogy id = 'teljes' > hogy >
ul >
A fenti kódrészlet leírása:
-
- Először használja a „
” címke. - Ezután rendelje hozzá a „ üres ”, „ fél ” és „ teljes ” három listaelemhez. Ezeket később a nagyobb kép egy részének megjelenítésére használjuk fel.
- Először használja a „
2. lépés: Az első kép megjelenítése
Az üres szív megjelenítése a weboldalon, amely az első kép a kép sprite-ban. Használja a ' üres ” id, és illessze be a következő kódot:
#üres {szélesség: 157 képpont;
magasság: 150 képpont;
háttér: url ( .. / sprite.jpg ) 0 0 ;
}
A fenti kódsorban:
-
- Először állítsa be a „ szélesség ” és „ magasság ” azon képről, amelyet a fejlesztő meg szeretne jeleníteni a weboldalon.
- Ezek a tulajdonságok a „ 157 képpont ” és „ 150 képpont ” a fent megadott példa szerint, de a különböző méretű képekhez képest eltérhetnek.
- Ezután adja meg a „ kobold ' kép a ' háttér ' ingatlan. Most állítsa be a „ 0 ” és „ 0 ” és megjeleníti a kép sprite első részét.
A fenti kódsor végrehajtása után a weboldal így néz ki:
A fenti pillanatfelvétel azt mutatja, hogy az image sprite első képe megjelenik a weboldalon.
3. lépés: A középső és az utolsó kép megjelenítése
A kép sprite középső és utolsó képrészének megjelenítéséhez illessze be a következő CSS-tulajdonságokat:
#fél {szélesség: 157 képpont;
magasság: 150 képpont;
háttér: url ( .. / sprite.jpg ) -462 képpont 0px
}
#teljes {
szélesség: 157 képpont;
magasság: 150 képpont;
háttér: url ( .. / sprite.jpg ) -770 képpont 0px
}
A fenti kódrészlet leírása:
-
- Először válassza ki a „ fél ” id, és szúrja be ugyanazokat a CSS-tulajdonságokat, amelyeket a fenti lépésben használtunk.
- A kép sprite középső képének megjelenítéséhez változtassa meg az irányt, vagy rendeljen hozzá kitöltést a bal oldalról. Például a bal oldali irány a következőre van állítva negatív 462 képpont ”.
- Ugyanígy jelenítse meg az utolsó képet úgy, hogy balról a „ -770 képpont ”.
A fenti CSS-tulajdonságok végrehajtása után a weboldal így néz ki:
A fenti pillanatfelvétel azt mutatja, hogy az image sprite három képe megjelent a weboldalon.
Következtetés
A ' kép sprite ” egyetlen nagy kép, amely több kisebb képből áll, akárcsak a kollázs funkció. És a nagy kép bármely része, amely egy kisebb képet ábrázol, megjeleníthető. A követelményeknek megfelelően a „ háttér ” tulajdonát a CSS biztosítja. Az adott kép kép sprite-ból való megjelenítéséhez először állítsa be a kép szélességét és magasságát. Ezt követően használja az irányértékeket, hogy a képnek csak egy részét jelenítse meg a kép sprite-ból.