如何创建代表精灵图像的CSS？ [英] How do I create the CSS that represents a sprite image?

问题描述

给出一个精灵图像，一个包含一个文件中的所有图像，我想要生成代表每个字符的CSS。我查看了一些精灵创建工具，他们都假设你有一个图像的目录，你想要合并成一个精灵，同时生成CSS。

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

谢谢！干杯！

http://imgur.com/1GHow像这样的图像。

解决方案

鉴于精灵表格是以规则网格排列的，Sass会很轻松地完成这项工作：

Sass $ b

  $ 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; 
背景位置：$ top $ left; 
 
 
 
 
 
 $ b 
 编译CSS   
 
 
  .sprite-0-0 {
 background位置：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; } 
  

您可以使用在线编译器

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.

解决方案

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

这篇关于如何创建代表精灵图像的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！