背景画像の配置におけるbackground-position属性の自己理解

最近、プロジェクトではラベルやボタンなどの断片的な画像をたくさん使用する必要があります。また、CSS の「elf テクノロジー」を使用する機会がありませんでした。ここでは、より多くの人々が使用して学習できるように、background-position に関する私の理解をドキュメントに書きます。

既存のボタン画像の組み合わせ

ステップ1 : 表示したい　このボタンの場合、まず div (後でウィンドウと呼ばれる) タグを定義する必要があります。その幅と高さは、このボタンを保持できる程度にする必要があります。

ステップ 2 : これが今日の私の講演の焦点です。多くの人は、background-position は操作の背景画像であると言いますが、私は操作のウィンドウであると言います。ウィンドウを通して見ることができるのは、背景画像の一部だけです。

水平座標と垂直座標の理解は、ウィンドウが画像の領域内で移動する限り、負の方向（負の座標）にあると言うことです。

見せるこの画像ボタンの場合、座標を指定する必要はありません。これがデフォルトです。もちろん、#div5{background-position: 0px 0px;} も使用できます。

見せるこの画像ボタンでは、背景位置の座標 #div6{ background-position:-42px 0px;} を設定する必要があります。

見せるこの画像ボタン、#div8{ background-position:-42px -41px;}

以下も同様です。

ここで私が言っていることは、皆さんも理解できると思います。ただ、これから始める人のために、理解の仕方をお伝えしているだけです。間違っている点があれば、ご指摘ください。 （タイプセットの仕方が分からないので、ご理解いただければ幸いです）