如何創建代表精靈圖像的CSS？

Question

給出一個精靈圖像，一個包含一個文件中的所有圖像，我想生成代表每個字符的CSS。我查看了一些精靈創建工具，他們都假設你有一個圖像的目錄，你想要合併成一個精靈，同時生成CSS。

這樣的工具是否存在？我有幾十個像這樣的精靈圖像，我需要處理。用手去做是不可能的。

謝謝！乾杯!

http://imgur.com/1GHow喜歡這個圖片。

Answer 1

鑑於精靈表設置在規則網格，薩斯會做到這一點很容易：

薩斯

$sprite-sheet-width: 384; 
$sprite-sheet-height: 384; 
$sprite-cols: 12; 
$sprite-rows: 8; 

$sprite-width: $sprite-sheet-width/$sprite-cols; 
$sprite-height: $sprite-sheet-height/$sprite-rows; 

@for $i from 0 to $sprite-rows { 

    @for $j from 0 to $sprite-cols { 
     .sprite-#{$i}-#{$j} { 
      $top: $i * $sprite-height; 
      $left: $j * $sprite-width; 
      background-position: $top $left; 
     } 
    } 

} 

編譯CSS

.sprite-0-0 { 
    background-position: 0 0; } 

.sprite-0-1 { 
    background-position: 0 32; } 

.sprite-0-2 { 
    background-position: 0 64; } 

.sprite-0-3 { 
    background-position: 0 96; } 

.sprite-0-4 { 
    background-position: 0 128; } 

.sprite-0-5 { 
    background-position: 0 160; } 

.sprite-0-6 { 
    background-position: 0 192; } 

.sprite-0-7 { 
    background-position: 0 224; } 

.sprite-0-8 { 
    background-position: 0 256; } 

.sprite-0-9 { 
    background-position: 0 288; } 

.sprite-0-10 { 
    background-position: 0 320; } 

.sprite-0-11 { 
    background-position: 0 352; } 

[...] 

.sprite-7-0 { 
    background-position: 336 0; } 

.sprite-7-1 { 
    background-position: 336 32; } 

.sprite-7-2 { 
    background-position: 336 64; } 

.sprite-7-3 { 
    background-position: 336 96; } 

.sprite-7-4 { 
    background-position: 336 128; } 

.sprite-7-5 { 
    background-position: 336 160; } 

.sprite-7-6 { 
    background-position: 336 192; } 

.sprite-7-7 { 
    background-position: 336 224; } 

.sprite-7-8 { 
    background-position: 336 256; } 

.sprite-7-9 { 
    background-position: 336 288; } 

.sprite-7-10 { 
    background-position: 336 320; } 

.sprite-7-11 { 
    background-position: 336 352; } 

，您可以嘗試與online compiler

Answer 2

http://cssspritegenerator.net/howto.php

開始通過創建一個帳戶。如果你準備好了圖片，並且很快就想使用CSS Sprite Generator而不創建一個沒問題的帳戶，只需使用「跳過登錄」即可。如果您選擇此方法，您的帳戶將在24小時後被刪除，如果您想要向精靈中添加更多圖像，則無法檢索密碼以供進一步使用。