1. スプライトマップとは何ですか?
ユーザーが Web サイトにアクセスすると、ブラウザーは一連のリクエストをサーバーに送信します。たとえば、Web ページ上の各画像は、最終的にユーザーに表示される前にリクエストを通過する必要があります。ただし、Web ページには多くの場合、大量の画像リソース (ページ上に表示される画像、Web ページの背景画像、装飾画像など) が含まれるため、ブラウザはサーバーに頻繁にリクエストを行うことになります。 Web ページの読み込み速度が低下します。サーバーへのリクエストの数を効果的に減らし、ページの読み込み速度を向上させるために、スプライト テクノロジーとしても知られる CSS スプライト テクノロジーが登場しました。
いわゆるスプライト マップは、複数の小さな画像を 1 つの大きな画像に結合し、CSS のbackground-position 属性を通じてスプライト マップ内に小さなアイコンを表示する画像ステッチ技術です。
写真: タオバオのスプライト マップ
スプライトチャートは以下の通りです。
2. スプライトチャートのメリット
1. スプライト テクノロジの使用により、ユーザー エクスペリエンスに影響を与える長いロード時間の問題を軽減できます。
2. ページの読み込み速度がある程度低下し、サーバーへの負荷がある程度軽減されます。
3. スプライトを使用すると、サーバーがリクエストを送受信する回数が効果的に削減され、ページ読み込みのパフォーマンスが向上します。
3. スプライトチャートの基本的な使い方
1. ツール: PS、HBuilder
2. マテリアル: 任意のスプライト マップを使用できます。
ステップ 1: ps を開いてスプライト マップをインポートする
ここに記載されている文字は YY です
ステップ 2: 文字のサイズと座標を測定する
(1) 長方形マーキーツールを使用して文字のサイズを測定し、div のサイズを文字のサイズに設定します。
(2) ウィンドウのメニューバーの情報を開くと、文字の幅、高さ、X 軸、Y 軸の情報を照会できます。
(3) マウスカーソルを文字の左上隅に移動し、右側の情報パネルから x 値と y 値を測定します。
(4) CSSでスタイルを記述し、background-positionで文字の位置を特定します。
レンダリング
コード：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>スプライトの使用</title><style>/*共通スタイル*/div{background:url(D:/dotcpp/img /picture) .jpg);/*スプライト リソースをインポートします*/float:left;/*フローティング レフトを設定します*/}.box1{/*ボックスの高さと幅はスプライトのサイズと一致している必要があります*/width:149px; height :140px;background-position:296px143px;/*それぞれ x 軸と y 軸に対応します*//*PS で位置決めする場合、位置を取得するには長方形の選択範囲の左上隅にカーソルを置きます*/}.box2 {/* ボックスの高さと幅はスプライトのサイズと一致している必要があります */width:149px;height:140px;background-position:296px143px;/*それぞれ x 軸と y 軸に対応します*//*When ps での位置決め、カーソルを長方形の選択範囲の左上隅に置きます。位置を取得できます */}</style></head><body><divclass=box1></div><divclass=box2> </div></body></html>