1

すべての画像が1つのファイルに含まれているスプライト画像が与えられた場合、各文字を表すCSSを生成したいと思います。私はそこにあるいくつかのスプライト作成ツールを見てきましたが、それらはすべて、スプライトに結合すると同時にCSSを生成する画像のディレクトリがあることを前提としています。

そのようなツールは存在しますか？このような数十のスプライト画像を処理する必要があります。手でそれをすることは問題外です。

ありがとう！乾杯！

http://imgur.com/1GHow Likethisimage。

4

2 に答える 2

2

スプライト シートが規則的なグリッドに配置されている場合、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; }

オンラインコンパイラで試すことができます

于 2012-11-15T23:51:10.903 に答える
0

http://cssspritegenerator.net/howto.php

アカウントを作成することから始めます。画像の準備ができていて、アカウントを作成せずにすぐに CSS スプライト ジェネレーターを使用したい場合は、「ログインをスキップする」代替手段を使用してください。この方法を選択すると、アカウントは 24 時間後に削除され、スプライトにさらに画像を追加したい場合にパスワードを取得して使用することはできません。

于 2012-11-15T22:46:50.337 に答える