9

最近のStackoverflow ポッドキャストの 1 つで、Jeff は、ページ全体にある小さな画像をすべて含む単一の画像ファイルを用意し、それを CSS でカットして、すべての画像が正しく表示されるようにすることについて話しました。全体のポイントは、サーバー リクエストの数を減らして、ページの読み込みを高速化することです。私は、「うわー、それは本当にクールだ、私たちの製品で本当にこれを使用できる」と思っていました.

私の質問は次のとおりです:これはCSSでどのように行われますか? background-image で画像をロードする必要がありますが、大きな画像でサブ画像のオフセットを指定するにはどうすればよいですか? つまり、大きな画像の (50px, 50px) にハンマーのアイコンがあり、そのサイズが 32px * 32px だとすると、ブラウザにそのビットのみを表示させるにはどうすればよいでしょうか?

4

3 に答える 3

10

基本的には、単一の画像を背景画像として使用しますが、表示する画像のオフセットだけ (左および上に) 移動します。たとえば、ハンマーのアイコンを表示するには:

.hammer
{
  background: transparent url(myIcons.jpg) -50px -50px no-repeat;
}

しかし、私の知る限り、背景画像を使用している要素が正しいサイズ (32x32 ピクセルなど) であることを確認する必要があります。

CSS スプライトを検索すると、より多くの情報が得られます。

于 2009-02-03T15:57:01.333 に答える
4

それはcss スプライトと呼ばれます。

私は基本的に、描画する必要のあるアイテムのすべての「状態」を含む単一のビットマップをロードするゲームプログラミングで使用される古いトリックです。利点は、この方法で画像がプリロードされ、実際に使用する必要があるときに遅延がないことです。 css の場合、通常は画像を要素の背景として使用し、:hover、:active、および「通常」クラスに異なるオフセットと境界を適用することで実装されます。

詳細については、stackoverflow ブログをご覧ください。

ここに素敵なジェネレーターがあります: http://www.csssprites.com/

于 2009-02-03T15:54:11.620 に答える