1

旅行中、訪問したサイトのレンダリングされた HTML、CSS、および Javascript ソースをよく調べます。至る所で使われているのを見たことがありますが、いまだに私を当惑させているテクニックが 1 つあります。次のような画像をよく見かけます。


(ソース: cloudfront.net )

アイコンでいっぱいですが、サイトでこの画像を使用すると、一度に大きな画像内のアイコンの 1 つだけに画像が制限されます。基本的に、多数のアイコンに同じ画像を使用しているように見えます。

私が正しく理解していれば、画像の読み込みとキャッシュに関しては、これが非常に役立ちます。これは、何らかの方法で分割される単一の画像であるためです。これはどのように作動しますか？これは Javascript を使用して行われますか?

4

2 に答える 2

4

このアイデアは、CSS スプライトと呼ばれます。それを検索しますが、基本的に、それがどのように/なぜ機能するかについてのあなたの直感は正しいです!

このSOを参照してください: css icon images or icon image?

jQuery UI は、これを使用して優れた効果を発揮するライブラリの例です。

于 2012-05-11T17:30:29.647 に答える
1

この記事ではそれについて説明します: http://css-tricks.com/css-sprites/

ほとんどの場合、background-position プロパティを利用します。背景画像を水平または垂直に並べて表示しようとすると、スプライト シートの向きが決まります。(スプライトをタイリングしていない場合、向きはまったく関係ありません)

于 2012-05-11T17:55:08.657 に答える