CSSスプライト、使用の原則に
CSSスプライトの説明：
使用CSSスプライトはよく、HTTPの数は大幅に時間と帯域幅を節約し、ページのパフォーマンスを向上させるページを要求減らすことができます。
CSSのウィザードと呼ばれる国内の多くの人々でCSSスプライトは、ウェブアプリケーションの絵アプローチです。これは、ページにアクセスする際に、画像が徐々に以前のように表示される土地の一部としてロードされない、ように、行くために大きなマップを含むすべての散発的な画像に関連するページにあなたを可能にA。現在人気のネットワーク速度のために必要な、基本的なロード時間の単一画像の200キロバイト以上はほぼ同じではありませんので、何の良心の呵責、この問題ではありません。
キー加速、体重を減らすために、その数を減らすことではありません。細かいカット、小さな優れた画像サイズに従来の描画注目、重量小さく、より良い、実際には、統一されたコンピュータはバイトであり、サイズの仕様には関係ありません。各クライアントの表示画面には、サーバに要求を送信します。だから、より多くの写真は、遅延の大きい可能性で、その結果、より多くの時間を要求します。
CSSスプライトの原則：
その後、CSS実際にはスプライト、画像ファイルに統合された背景画像のページ数、およびCSS「背景画像」を使用し、「リピートバックグラウンド」、「バックグラウンド・ポジション」の背景の位置の組み合わせ、背景の位置を使用することができますデジタル正確背景画像の位置を特定することができます。
CSSは、利点をスプライト：
使用CSSスプライトはよくHTTPが大幅にも幅広い普及と応用のための主な理由であるCSSスプライトの最大の利点であるページのパフォーマンスを向上させるWebページを要求する減らすことができます。
CSSスプライトは、画像のバイトを減らすことができ、繰り返し1画像バイトに三つの画像を比較している、常に絵のこれらの3バイトの合計よりも小さいです。
Webデザイナーは写真のちょうどコレクション姓その上に絵の命名、問題を解決し、それによって、ウェブページの生産効率を向上させること、どんな小さな要素にちなんで命名されている必要はありません。
ただあまり絵の色やスタイルに絵を変更、スタイルを変えることは容易で、ページ全体のスタイルを変更することができます。メンテナンスがより便利に。
CSSスプライト短所：
実際、CSSスプライトは非常に強力ですが、いくつかの欠点があります無視することはできません
あなたは宇宙に滞在する秩序と合理的な一の画面にまとめ、だけでなく、十分にしたい場合は、画像の合併、複数の写真、部門の不要なバックグラウンドを防ぐためには表示されません。これらの幸いなことに、ほとんどの痛みを伴いますあなたの写真が十分広くない場合は、画面下のワイドスクリーン、高解像度の適応のページでは、バックグラウンドを破砕する傾向があります。
開発中にCSSスプライトあまりにも面倒、あなたは針仕事、ノー困難である背景Photoshopや他の測定ツールによって、各ユニットの正確な位置を計算する必要があるが、それは面倒であり、RIAによる幸いテンセントゴースト弟はCSSのスプライトを開発しましたまだそこに使用上のいくつかの柔軟性ですが、フォトショップを測定するよりも、はるかに便利に来た、とスタイルを直接生成するものの、パターン生成ツール、複製、それはOKコピー！
メンテナンス時のCSSスプライトあまりにも面倒ページの背景にはほとんど変化がある場合、あなたは移動しないように最高の場所を変更することなく、本合併の一般的な画像を変更しなければならないので、同じ場所に置かれていない場合、変更より多くのCSSを避けますが、唯一の（最高の）プラス絵の下、その絵のバイトが増加しているが、また、CSSを変更します。
CSSスプライトは、特定のページにバンチICO（アイコン）を持ち、学習と応用価値があります。短い何回では、長所と短所を比較検討して、CSSのスプライトを使用するかどうかを決定する必要があります。
CSSスプライト画像の切除
左から右へ、上から下へ1. CSSスプライト画像シーケンスが一緒に写真を追加しました。通常のbackground-position組み合わせデジタルポジショニング、メンテナンスが不要なトラブルをもたらすために低減することができます。
ファイルサイズがファイルサイズの増加に伴って増加するので2は、一定の距離CSSスプライト画像を維持するために推奨しません。
画像ファイルのサイズより少ない色数が比較的小さくなるため、同じ色の組み合わせで、または近接して3 CSSスプライト画像は、色の数を減らすことができます。
CSSスプライト画像がギャップを持っていないので、CSSスプライト同じ絵4.サイズは、サイズが大きくなり、ほとんどの場合、ある程度の中に大きなギャップを残します。
同じ画像サイズのCSSスプライト5.、垂直に位置合わせされた画像ファイルのサイズは水平配向よりも大きくなります。
6. CSSスプライト画像、画像ファイルのサイズは、水平方向に整列する垂直よりも大きくなるように配置されています。
7.画像の合併：CSSスプライト画像を適用するには、適切に同じ画像の等の組み合わせとスペースを節約するために、ボリュームで減少しました。
8.合成画像を区別する必要がない：現在のユーザが判定された場合には場合一方の状態または表示つのみレベル、合わせ他のピクチャの必要なレベルまたはステータス。
9.ゴールド切断：CSSスプライト画像は、他の介入は一定の線幅を確保する必要はありませんではありませんので、最も適切な位置アイコンは、テキストの前に置か右端または最も精神的な活動のCSSスプライト画像の左。
10.一部と底部または右ので、ポジショニングの使用を避ける、CSSスプライトを使用して、唯一のbackground-position：下-300pxや背景位置：右-200px;非常に簡単。これは、それが実行可能であるまだ始まったばかりですが、絵はもはやスプライトまたは下の写真の右側の一部であるため、問題は、あなたが幅または高さに関連するスプライト画像を展開すると、元の設定の場所が間違っているかもしれないことですA。この問題を回避するために、正確な位置を使用してください。
実際に、私は通常の状況はRIGHTで、無理なく紙面の幅を変更せず、LEFTは非常に便利ですが、全体的に考慮、アップグレード感じます。改訂。画像の幅は変更する可能性があります。結局、最初に広すぎるダメをやっていない、我々は多くのスペースを無駄にしています。それは少し余分な時間がRIGHTとのLEIFTを行うために、より良い調整すること、です。
各画像は、あなたがこのインスタンスの上部の画像に表示されて同じように十分なスペースがあり、それらのほとんどの写真は十分なスペースを確保してきたと言うことのように11.いくつかは、これまで行ってきました。なぜそれらを入れていないこれらの画像素子の使用は通常、コンテンツの多くを持っているし、他の画像は、予期せぬことではないだろうという距離を延長する必要があるかもしれないから？それを小さくするスプライト画像に詰め。
CSSスプライトを使用する利点？
CSSスプライト（画像統合技術）の目的は、このようにページの読み込み速度を高速化、サーバーへの要求の数を減らし、画像の統合によりです。下図のように：
どのように作るには？
基本的な原理は、調整する負背景-postionを使用することです。
我々は、バックグラウンド位置に配置されている場合：-50px -50px; Iは、左に移動する画像を発見し、また、中央の左上隅にDIV図は50pxが左に移動し、さらには50pxの時間を移動します。
基準点（0,0）原点絵。
背景画像採取グラフ問題の位置決め
ここでは、例の子供が、同じ理由背景本体、TD、P、などかもしれために、のdivコンテナに書き込むために、バックグラウンドとしてのCSSの画像を使用する際に知っています。
コード：
DIV {背景：#FFFのURL（画像）無リピート固定XY;}
ここでは、次のようにプロパティの値がなかった背景があります：
#FFF背景色:(背景画像が覆われていない、または背景画像の背景色を表示しない色の値）
画像の背景画像:(ここでは画像のアドレスです）
非反復かどうか:(画像を繰り返すことコンテナサイズよりも小さい場合、デフォルトの画像が繰り返しコンテナを充填するために配置された、無反復を繰り返すしない発現し、位置のみを使用してのみ、この時間は、後に調整します。）
固定された背景には、容器が2つのオプションの値は、スクロール転がり、転がりが固定されていない場合、デフォルトはスクロールすることです）を持っているかどうか:(ロールオーバー
のみなしリピート内で検索することは理にかなっていることを背景画像:(ノートのxy位置付け。これは、今日の話の焦点です）
背景画像の位置、我々はいくつかのポイントをクリアする必要があります。
図1は、二つの値前部横方向配向は、我々は、x軸方向の位置決めと呼ばれます。値が長手方向に後ろに位置している、我々は、y軸方向の位置決めを呼び出します。唯一の値場合、それはそれが垂直中心デフォルト、すなわち中心であるこの時点でデフォルトのX軸方向、Y軸方向です。
図2は、左側に対応する座標軸は、容器の頂部です。
図3に示すように、下向き矢印、（容器内の）右下の、すなわち値のy軸座標はXYのみ正です。
図4は、xyは頂点値を左（すなわち、容器の頂点を左側）座標原点に対して背景画像の値を表します。
図5に示すように、XYの値は、パーセンテージまたはピクセルによって表されてもよいです。
アプリケーションアライメントルールである場合を示すために、「左、右、上、下、センター」：6、XYはまた、5つのアライメントが、音符を表すために「左、右、上、下、センター」を使用することができ代わりに、ルールを調整します。Xが残され、左側は容器の上部と画像位置合わせの上部は、の下で画像を表現するときの表現の権利及びその容器の右画像が、Yが上に示されている右に位置合わせ画像容器の残っています底部と容器の底部を整列させる、XYは、中心を中心とする時間に等しいです。
図7は、XYパーセンテージまたはPXは負の値とすることができる時間を表します。左の写真は、容器の左側の頂点の左側の頂点を表す場合、負の数の規則の意味を理解することは容易である上に、我々は、アプリケーション座標、xが負であり、Yが、左容器左点の頂点で負である場合、画像を表します。すなわち、左方と上方の容器の範囲を超えて。
位置決めがパーセントである場合、アルゴリズムはかなり特別であることを追加します。例を挙げましょう：
コード：
背景：#FFFのURL（画像）50％-30％の固定なしリピート;
次のようにコンテナの位置にあるべきもののこの時間画像は、アルゴリズムの式はありません。
画像は、左上の容器の頂部からの位置座標点左
容器のX :(幅 - 画像の幅）X50％
コンテナのY :(高さ - 画像の高さ）×（-30％）
差が負の場合座標法則を適用して得られた結果は、動作の陽性結果の割合が負です。差が負の場合、割合は、計算結果が肯定的である、また負です。このすべてのすべてで、動作アルゴリズムに沿ったものです。法律の運用の結果は、画像の位置座標に取得することができます。
;例：高さ600PX：容器は幅600PX、画像の幅である;高さ200pxの：200pxの。
私たちは、あなたが絵の場所を取得することができ、上記のスタイルを使用します。
X：（600PX-200pxの）* 50％
そして、：（600PX-200pxの）*（ - 30％）
