CSS - 背景の位置 - 通常の画像の例でスプライト

Question

ので、CSSで、私は背景位置の使用は、あなたがあなたの写真を配置したい場所を制御するために使用することができ集まる

background-position: 0px 0px; 

（単一の画像を。）

は、画像を左上隅から配置します。

しかし、xとy pxの値を変更すると、スプライトのコンセプトが導入されたときに混乱してしまいます。イメージをウェブサイトの別の領域に移動するだけでなく、使用するスプライト内の画像

background-position: 0px 0px; 

と

background-position: 30px 30px; 

の違いは、同じアイコンが30ピクセルの右と30ピクセル下に移動させたことが、我々はスプライトを持つべきではないと言いますか？

しかし、他のチュートリアルでは、画像の位置は変わりません。スプライトの座標に基づいてスプライト内の画像を選択するには、background-positionを使用することができます。

私は混乱しています。

Answer 1

したがって、スプライトは複数の画像を結合しています。 ..イメージが1つだけです（小さいものから成る大きなもの）。

ここでdivの背景としてそのスプライトを使用するとします。あなたの疑問を明確にする今

.. div要素を使用すると、画像の特定の部分のみを見ることができる窓であると仮定が... はそうスプライトに、我々は最初の画像の特定の部分のみを示し、我々はそれをどのように行うのですか？あなたが大規模なスプライト画像が移動（小さな画像で構成される一つだけ大きな画像がある覚えていることを背景位置を変更したときに、今の初期の背景位置値

を与えることによって（すなわちDIV）ウィンドウの後ろにスプライトの一部を配置することにより

）...それはdiv要素の変更（つまり、背景画像）

スプライトのいくつかの他の部分が窓から見える移動し、それがあるときにどのように新しいイメージdiv要素を通して見える...

をので、それをこのように理解して

そのない来る必ずしも新しい画像が、背景の位置が、これはhttps://www.smashingmagazine.com/2009/04/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

を助けている場合

を見て変更したときに表示さスプライト画像のいくつかの他の部分、