CSSでbackground-positionプロパティを設定する方法

CSSのbackground-positionプロパティは、背景画像の位置を設定するために使用できます。

background-position プロパティは次の値を設定できます:

1. キーワード：left、center、right、top、bottomとは、それぞれ背景画像が容器に対して左、中央、右、上、下に配置された状態を表します。
2. パーセンテージ値：パーセンテージ値を使用して背景画像の位置を設定します。例えば、50% 50% は背景画像がコンテナの中心位置にあることを示します。
3. ピクセル値：ピクセル値を使って背景画像の位置を設定します 10px 20px などの場合は、背景画像の左上隅がコンテナの左上隅から水平方向に10ピクセル、垂直方向に20ピクセル離れていることを意味します。
4. 数値の組み合わせ：キーワード、パーセント値、ピクセル値を組み合わせることで、例えば「left top」とすると背景画像がコンテナーの左上の位置に配置される。

以下に例をいくつか示します。

background-position: left top;  // 背景图像在容器的左上角位置
background-position: center;  // 背景图像在容器的中心位置
background-position: 50% 50%;  // 背景图像在容器的中心位置
background-position: 10px 20px;  // 背景图像左上角距离容器左上角的水平和垂直距离分别为10px和20px
background-position: right bottom;  // 背景图像在容器的右下角位置

ただし，1つの値のみが指定されている場合，もう1つの値はデフォルトの値 center に設定されます。