2

私は自分の CSS でより禅になろうとしており、またサーバーの負荷を軽減しようとしています。背景画像とオフセット値を使用して、すべての小さなアイコン画像を 1 つの画像にダウンロードし、CSS を使用して適切な画像を表示できる手法を聞いたり見たりしたことがあります。ただし、これを正しく行う方法が少し混乱しています。具体的には、img.png という大きな画像に 48 ピクセルの 16x16 の画像がある場合、次のようなものが必要です。

<img style="background-image: url('img.png'); background-position: 48px" />

(明らかにスタイルを CSS に取り出しますが、ここでは説明のためにインラインにしています。)

ただし、 img はオフセットを無視します。スパンのようなものを使用した場合、スパンの幅を設定する方法が正確にはわかりません（実際に試してみたところ、幅が無視されたようです）。

どんな助けでも大歓迎です。

4

3 に答える 3

3

タグとは異なるタグを使用し、imgそのサイズを指定する必要があり、背景の位置は負でなければなりません。divたとえば、タグはデフォルトでブロックタグであるため、サイズを指定できるため、タグを使用できます。

<div style="width: 16px; height: 16px; background: url('img.png') -48px;"></div>

オフセットを 1 つだけ指定すると、その水平位置と垂直位置はゼロになります。垂直オフセットの場合は、水平オフセットと垂直オフセットの両方を指定する必要があります。

<div style="width: 16px; height: 16px; background: url('img.png') 0 -48px;"></div>
于 2010-08-17T22:27:05.147 に答える
1

このツールを使用してスプライト画像を生成できます。また、ツールがcssの生成を処理します。

于 2010-08-17T22:29:56.137 に答える