如何创建代表精灵图像的 CSS？答案

【问题标题】：How do I create the CSS that represents a sprite image?如何创建代表精灵图像的 CSS？
【发布时间】：2012-11-15 22:39:48
【问题描述】：

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

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

谢谢！干杯！

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

【问题讨论】：

我认为您所要求的内容很难找到的原因是该软件很难从单个大图像中识别各个精灵之间的边界。无论如何，您是否看到此处列出的所有 Sprite 生成器：stackoverflow.com/questions/4968702/…？
它们是否排列成规则的网格？
不可能？几十个精灵？图像目录是合乎逻辑的，因为该实用程序会将每个图像放置在一个坐标上并了解其尺寸。如果不是，您希望它只知道一个精灵从哪里开始，另一个在哪里结束。据我所知，不存在这样的工具。并不意味着它不存在于某个地方。只是据我所知。不过祝你好运。
鉴于它们在一个规则的网格中，编写一个可以输出 CSS 的 Sass 函数会很容易。或者，您可以使用 Photoshop 或 Imagemagic 来split the images up，然后使用各种工具来创建 CSS。

标签： html css sprite css-sprites

【解决方案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; }

你可以试试online compiler

【讨论】：

【解决方案2】：

http://cssspritegenerator.net/howto.php

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

【讨论】：

这正是我不想要的。我不想上传一堆图片。我有一个包含所有精灵的图像文件。这就是我需要分解和生成的 CSS。