html - 如何创建表示 Sprite 图像的 CSS？

Question

给定一张 sprite 图像，其中包含一个文件中的所有图像，我想生成代表每个字符的 CSS。我看过许多 sprite 创建工具，它们都假定您有一个图像目录，您想要将这些图像组合成一个 sprite，同时生成 CSS。

有这样的工具吗？我有几十张这样的 Sprite 图像需要处理。手工完成是不可能的。

谢谢!干杯!

http://imgur.com/1GHow喜欢这张图片。

Answer 1

鉴于 sprite 表排列在规则的网格中，Sass 可以轻松做到这一点:

萨斯

$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 进行尝试