Photoshopを上手に活用してフロントエンドエンジニアのスキルアップ（レンダリングからスプライト画像まで） 5-- Theory_html/css_WEB-ITnose

[ 1] http リクエストの数を削減します

[2] 画像サイズを削減し、Web ページの読み込み速度を向上させます (複数の画像の読み込み速度は、結合した画像の読み込み速度より遅くなります)

[デメリット]

[1] 開発の増加コスト

[2] メンテナンスコストの改善

【補足】（ブラウザには並列ネットワークリクエスト数に制限があります）

http1.1（永続永続） http1.0（一時永続）

IE6、富裕層富裕層
【補足】情報] (ブラウザには並列ネットワークリクエストの数に制限があります) Firefox 6
Firefox 6 ulousatch' 6

[適用シナリオ]: 背景に使用される画像のみを結合できます

[1] 、これらの画像をより大きな画像に結合することはできません。結合すると、これらの画像はページの読みやすさに影響し、セマンティクスが低下し、調整可能な範囲が小さくなります。
[2] 水平方向と垂直方向の両方にタイル状に並べられた画像の場合、CSS Cprite は使用できません。水平方向にタイル状に並べられたすべての画像は 1 つの大きな画像にのみ結合できます。水平方向には配置できません。垂直方向に並べて配置した場合、垂直方向に並べたすべての画像を 1 つの大きな画像に結合することしかできません。この画像は、垂直方向ではなく水平方向にのみ配置できます。

【計算方法】
[1]background-positionは画像の開始位置を表すため、左上隅から開始して、x軸は右方向に正、y軸は下方向に正となります。したがって、一般にスプライトの値は負の値になります。 [2] 背景位置の計算は、0 点から画像の左上隅までのオフセットを指します。 [3] 左: 背景画像の左側を揃えます。要素の左側; 右: 背景画像の右側を揃えます; 中央: 背景画像の中央を要素の中央に揃えます

[ブラウザ互換性ソリューション]: IE6 は行います。 PNG24の半透明には対応していません
[1] 処理方法1
[a] 高機能ブラウザ用にsprite.png 24を保存

[b] IE 8用に背景をカットしたsprite_ie.pngのコピーを保存

[2] 処理方法2
[ a】高機能ブラウザではcss3を使用します
【b】低レベルブラウザではimage Cut+hackを使用します

【3】処理方法3：グレースフルデグラデーション

【注意事項】
【1】要素に背景画像と背景色の両方がある場合, 背景色はbackground-colorと書く必要がありますが、backgroundと書くと背景画像のプロパティが上書きされてしまいます
【2】cssを使う エルフでアイコンを加工する場合、小さいアイコンのサイズを事前に決めておく必要があります。そうしないと、後のメンテナンス時に非常に面倒になります。