0

スプライト画像の使用に興味をそそられました。

教育上の理由から、私は SO の CSS を研究しており、個別の画像ではなく、とりわけ上下投票のような項目が png 画像全体から取得されていることがわかりました。

background-image:url('img/sprites.png?v=5')

組み立てられたpngから個々の画像を引き出すにはどうすればよいですか? サイト内で使用できるので、メインの画像を 1 つにまとめるよりも、サブディレクトリに大量の画像を配置するよりも効率的です。

4

1 に答える 1

3

重要なのはbackground-position、そのようなスプライト画像を作成してから、各画像のオフセットを計算することです。次に、適切な値を設定します。また、背景を保持する要素の正しい幅と高さを指定する必要があります。

例 (ここの上矢印から):

background-position: 0 -265px;
height: 25px;
width: 41px;

同じbackground-imageでも異なる位置を設定します。

于 2013-03-13T23:47:41.487 に答える