CSS スプライトの概要
通常は「CSS画像ステッチ」または「CSSテクスチャ配置」と訳されます。 CSS スプライトは、Web 開発において比較的成熟した技術ではありません。CSS スプライトの影は、アリババ子会社の Web ページのいたるところで見られます。ただし、CSS スプライトは黄金律ではありませんが、多くの場合、CSS スプライトには特定の利点があります。最も重要なことは、サーバーの負荷を軽減し、Web ページの読み込み速度を向上できることです。 Web デザインがより洗練され、独創的な方向に発展するにつれて、デザイナーはマウスオーバーやホバー メニューの効果を作成するために JavaScript 以外の方法を使用することを検討し始めました。このとき、CSS スプライトが登場しました。
率直に言うと、CSS スプライトは実際に Web ページ内のいくつかの背景画像を画像ファイルに統合し、CSS の「background-image」、「background-repeat」、および「background-position」の組み合わせを使用して背景を配置します。位置では、背景画像の位置を正確に特定するために数値を使用できます。
ページが読み込まれるとき、個々の画像を読み込むのではなく、結合された画像全体が一度に読み込まれます。これは大きな改善であり、HTTP リクエストの数が大幅に減少し、サーバーの負荷が軽減され、ホバー時の画像の読み込みに必要な遅延時間が短縮され、効果がよりスムーズになり、中断がなくなりました。
CSSスプライト関連の記事
CSS スプライト アプリケーション
この点では、タオバオの方が優れています。タオバオを例に挙げてみましょう。
例 1: タオバオ チャネル ページのナビゲーション
レンダリング：
スプライト図:
