Question

给定一个精灵图像，一个包含一个文件中的所有图像，我想生成代表每个角色的CSS。我已经查看了许多精灵创建工具，他们都假设你有一个想要组合成精灵的图像目录，同时生成CSS。

这样的工具是否存在？我有几十个这样的精灵图像，我需要处理。手边做是不可能的。

谢谢！干杯！

Answer 1

鉴于精灵表是按照规则网格排列的，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

进行试用

Answer 2

http://cssspritegenerator.net/howto.php

首先创建一个帐户。如果您已准备好图像并且很快想要使用CSS Sprite Generator而不创建一个很好的帐户，只需使用“skip login”alternativ。如果您选择此metod，您的帐户将在24小时后被删除，如果您想要向精灵添加更多图像，则无法检索密码以便进一步使用。

如何创建表示精灵图像的CSS？

2 个答案: