1

私はCSSスプライトについて知っています..今、私はCSSスプライトのいくつかの例が欲しい....

  • どのようにして CSS スプライトを機能させましたか?
4

6 に答える 6

2

私は通常、CSS の background プロパティを使用します。このプロパティを使用すると、以下の例でわかるように、スクロール引数を上と左に設定できます。そのため、すべての状態を含む 1 つの画像を作成し、要素 CSS を変更するホバーやその他のカスタム イベントなどのイベントに基づいて単純に配置するという考え方です。これが役立つことを願っています。

.mySprite a
{
    background: transparent url(/images/spriteButton.gif) no-repeat scroll 0 0
}

.mySprite a:hover
{
    background: transparent url(/images/spriteButton.gif) no-repeat scroll 30 0
}
于 2010-01-27T06:17:44.973 に答える
1

Firefox を使用している場合、ここでスプライトとは何かを簡単に理解できます。yahoo.com に移動し、右クリックして [ページ情報を表示] を選択し、[メディア] をクリックします。「sprite」を含むファイル名を探します。

これはリンクの 1 つです: http://d.yimg.com/a/i/ww/met/gsprite_071309.gif

多くの背景グラデーション画像が表示されます。このファイルを使って遊ぶことができます。次のように、使用する背景に応じて、CSS で背景の位置を調整する必要があります。

background-image: url('http://d.yimg.com/a/i/ww/met/gsprite_071309.gif') left -30px repeat-x;

これにより、スプライトの管理方法が理解できるはずです。

于 2010-01-27T06:18:39.027 に答える
0

ボタン画像に使用しています。画像の上半分を通常のボタン状態に使用し、下半分をマウスオーバー状態に使用します。そうすれば、ページが読み込まれるときにマウスオーバー画像が読み込まれ、遅延がなくなり、見た目が悪く遅くなります。CSSコードはこちら。

于 2010-01-27T06:17:44.623 に答える