Bilder · Sprite-ark

Skapa ett CSS-spriteark på Mac

Packa symboler i en bild med CSS för att visa var och en, plus en HTML-förhandsvisning.

Körs på din Mac

Fråga AIChatGPTClaudePerplexityAI-lägeGrokMarkdown

Hämta OneMacTools Fler verktyg för Bilder

Sprite-ark på en Mac

Sprite-ark med exempelfiler och alternativ

Vad Sprite-ark skapade av exempelfilerna

Skärmavbilder från appen, med exempelfiler.

Så använder du Sprite-ark

1
Släpp dina symboler
Lägg till två eller fler bilder. Varje filnamn blir en CSS-klass, så ge dem bra namn först, till exempel ”search.png” och ”cart.png”.
2
Ange mellanrum och prefix
Välj avståndet mellan symbolerna och prefixet för CSS-klassen.
3
Märk retina-symboler
Om dina symboler är @2x slår du på Retina-alternativet så att de visas skarpt i halv storlek.
4
Klicka på Skapa ark
Symbolerna packas i rader och sparas som sprite.png, med sprite.css och en preview.html-sida, i en daterad mapp i Hämtade filer › OneMacTools.
5
Använd den på din webbplats
Lägg sprite.png och sprite.css tillsammans, länka CSS-filen och lägg till klasserna på elementen. Öppna preview.html för att se alla klasser.

Vad Sprite-ark gör

Symboler av alla storlekar packas tätt i rader, var och en får en egen CSS-klass med rätt position och storlek, och en förhandsvisningssida visar dem alla. Ställ in avståndet mellan symbolerna, klassprefixet och om symbolerna är @2x för skarpa Retina-skärmar.

Perfekt för

Läs in en uppsättning symboler med en enda begäran
Gör ett spriteark för ett spel
Samla flaggor eller emoji för en webbplats

Alternativen förklarade

Avstånd mellan symboler: 0, 2, 4 eller 8 px; standard är 2 px. Ett litet mellanrum hindrar intilliggande symboler från att blöda in när sidan zoomas.
Symbolerna är @2x (visa i halv storlek för skarpa Retina-skärmar): Av som standard. När det är på visar CSS:en varje symbol i halva pixelstorleken och skalar arket därefter, så symboler i dubbel upplösning ser skarpa ut på retinaskärmar.
Prefix för CSS-klass: Början av varje klassnamn; ”icon” om fältet lämnas tomt. Med prefixet icon blir ”search.png” .icon-search.

Goda råd

Namnge filerna med gemener och bindestreck innan du börjar. Klassnamnen hämtas från dem, och ”@2x” tas bort automatiskt.
Använd symboler med genomskinlig bakgrund så att arket fungerar på alla sidfärger.
Gör Retina-symboler i exakt dubbla visningsstorleken, med jämna pixelmått, så att de halverade storlekarna blir hela pixlar.
Komprimera sprite.png med Komprimera PNG efteråt; en PNG med palett blir ofta mycket mindre för symbolark.
Använd ett mellanrum på 2 px eller mer om symbolerna ska skalas eller visas när sidan är inzoomad.

Fungerar med

In: Två eller fler bilder, oftast PNG-symboler, i valfria storlekar.
Ut: sprite.png (alla symboler packade tillsammans), sprite.css (en klass per symbol med storlek och placering) och preview.html.

Symboler av olika storlek packas tätt i rader, de högsta först.
Filer med samma namn får numrerade klasser, som -2, så att ingen går förlorad.

Frågor om Sprite-ark

Vad är ett CSS-spriteark?

En bild som innehåller många symboler, med CSS som bara visar en symbol per element genom att förskjuta bakgrunden. Alla symboler läses in med en enda begäran.

Hur använder jag spriten på min webbplats?

Ladda upp sprite.png och sprite.css till samma mapp, länka CSS-filen på din sida och lägg till klasser som class="icon icon-search" på ett element.

Hur skapas klassnamnen?

Från varje filnamn, med gemener och med mellanslag och symboler omgjorda till bindestreck, efter ditt prefix. ”Shopping Cart.png” med prefixet icon blir .icon-shopping-cart.

Kan jag använda symboler av olika storlek?

Ja. Varje symbol behåller sin egen storlek, och dess CSS-klass får matchande bredd och höjd.

Hur gör jag sprites skarpa på Retina-skärmar?

Gör symbolerna dubbelt så stora som du ska visa dem och slå på alternativet @2x. CSS:en visar dem då i halv storlek, vilket ser skarpt ut på skärmar med hög upplösning.

Kan jag använda det för spel-sprites?

Ja. sprite.css listar varje bilds placering och storlek på arket, vilket du kan läsa in i en spelmotor eller canvas-kod.

Laddar Sprite-ark upp mina filer?

Nej. Sprite-ark körs helt på din Mac, så dina filer lämnar den aldrig och det fungerar offline.

Ändrar Sprite-ark mina originalfiler?

Nej. Resultaten sparas som nya filer i en daterad mapp i Hämtade filer › OneMacTools, och dina original lämnas exakt som de var om du inte slår på ett alternativ som säger något annat.

Vad behöver Sprite-ark?

Bara en Mac med macOS 26 eller senare. Det finns inget annat att installera.