スプライトピクチャーの応用

週末にかけて、スプライトグラフィックスの実装方法を勉強しました。まずはスプライトピクチャについて学びましょう。 スプライトピクチャとはCSSスプライトのことで、CSSスプライトとも呼ばれます。つまり、小さなアイコンと背景画像を 1 つの画像に結合し、CSS の背景の配置を使用して画像の表示する必要がある部分を表示します。

1. 利点と利点:

ウェブサイト上の http リクエストの数を効果的に減らし、画像の表示を高速化します。

2. 条件:

• 静止画像、画像はユーザー情報の変更に応じて変化しません。
• 小さな写真、比較的小さな容量（2〜3k）。
• 画像の読み込み容量は比較的大きいです。

注: 画像が大きすぎると、分解後は無敵になり、読み込みが遅くなり、無駄になります。 ！ ！

3. 原則: css3 の background-position を使用して、レイヤーの表示領域のサイズを制御し、ウィンドウ を通して背景画像をスライドさせます。

簡単に言うと、この属性を使用して、背景画像を表示する必要がある開始位置を設定し、ラベルを通じて背景画像の表示範囲を制御します。

4. まず、background-position 属性について理解しましょう

写真に基づく:

• 左上隅を(0,0)座標として取得します
• x、yは両方とも負の値です

要約すると、background-position の値は、background-position: 0, 0;

5. パズル: パズルには ps を使用するか、インターネット上の多くのオンライン スプライト生成ツールを使用してスプライトを生成できます。

オンラインパズルツールを使って手動でコメントをドラッグアンドドロップしましたが、ちょっと気持ち悪いです~~笑

実際、最良のパズルは、各アイコンの余白とアイコンの周囲の空白の量を制御することです。 CSS の背景位置の座標が規則的に記述されていれば、より良くなります (ただし、これはは自分で手動で行っています）ドラッグしていて、位置が非常に不規則なので、以下の座標値はすべてデバッグ後のものです）

これについて話したら、本題のhtmlとcssのコードに移ります。次のコードは、メニューを模倣して生成するものです~~~

6. コード:

7. レンダリングは次のとおりです:

スプライトの適用は以上です~~間違いがあればご指摘ください~~あはは