html - 如何创建代表精灵图像的 CSS？

Question

给定一个精灵图像，一个文件中包含所有图像，我想生成代表每个字符的 CSS。我已经查看了一些精灵创建工具，它们都假设您有一个图像目录，您希望将这些图像组合成一个精灵并同时生成 CSS。

这样的工具存在吗？我有几十个这样的精灵图像需要处理。手动操作是不可能的。

谢谢！干杯!

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

Answer 1

鉴于 sprite sheet 被安排在一个规则的网格中，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; }

您可以使用在线编译器尝试一下

Answer 2

http://cssspritegenerator.net/howto.php

首先创建一个帐户。如果您已经准备好图像并很快想要使用 CSS Sprite Generator 而无需创建一个很好的帐户，只需使用“跳过登录”替代方法。如果您选择此方法，您的帐户将在 24 小时后被删除，如果您想向您的精灵添加更多图像，您将无法取回密码以供进一步使用。