How do I create the CSS that represents a sprite image?

问题

Given a sprite image, one with all the images in one file, I want to generate the CSS that would represent each of the characters. I have looked at a number of the sprite creation tools out there and they all assume that you have a directory of images that you want to combine into a sprite and at the same time generate the CSS.

Does such a tool exist? I have a few tens of sprite images like this that I need to process. Doing it by hand is out of the question.

Thanks! Cheers!

http://imgur.com/1GHow Like this image.

回答1:

Given the sprite sheet is arranged in a regular grid, Sass will do this easily:

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;
        }
    }

}

Compiled 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; }

You can try it out with the online compiler

回答2:

http://cssspritegenerator.net/howto.php

Start by creating an account. If you have your images ready and quickly want to use CSS Sprite Generator without creating an account that is fine, just use "skip login" alternativ. If you pick this metod your account will be deleted after 24 hours and you cannot retreive your password for further usage if you want to add more images to your sprite.

来源：https://stackoverflow.com/questions/13407493/how-do-i-create-the-css-that-represents-a-sprite-image

标签

html

css

sprite

css-sprites