web-dev-qa-db-ja.com

異なる画像(ホバー、非ホバーなど)でいっぱいのスプライトを作成するにはどうすればよいですか?

私はネット上にスプライトを作成するツールがあることを理解していますが、アイコンのさまざまな状態のアイコンを作成する方法を学びたいです。このアイコンのこれらすべての異なるバリエーションを作成する簡単な方法はありますか?

alt text

(また、スプライトのアドバイスを求めているように聞こえないように、私の質問にWordをより良くする方法を教えてもらえますか?)

3

私があなたの質問を理解し、スプライトが本当に単なる画像合成画像であることを既に知っているなら、あなたが知る必要がある最後の部分はCSSについてです。

CSSは、画像の一部を状態に関連付けるものです。ボタンを表すhtmlを作成し、クラスに割り当ててから、CSSを作成します。

.my-button{
    width:20px;
    height:20px;
    background:url('my-button-Sprite.gif') top left no-repeat;
}
.my-button:hover{background-position: 20px 0px;}

適切な水平オフセット(最初の数値)を追加するだけで、目的の状態で表示されるはずのスプライトをバンプします。

4
Daniel Rhoden

ホバー画像はCSSスプライトの唯一の用途ではありません。また、静止画像またはさまざまなアイコンの状態にスプライトを使用することもできます。例として示したように単一の画像を作成し、アイコンの状態ごとに異なるCSS背景座標を使用します。秘Theは、背景の座標を正しくすることです。

0
Virtuosi Media