CSSで背景画像を中央に配置する方法

CSS では、background-position 属性を使用して背景画像の中心を設定できます。 水平方向の値: center (中央)、left (左揃え)、right (右揃え) 垂直方向の値: center (中央)、上 (上揃え)、下 (下揃え) 構文:background-position:horizo​​ntal-valuevertical-value;

方法CSS を使用して背景画像を中央に配置するには

本題へ:

CSS で、background-position プロパティを使用します。背景画像の中心位置を設定します。

詳細な展開:

background-position このプロパティは、水平位置と垂直位置をそれぞれ指定する 2 つの値を受け入れます:

• 水平方向の値:

  • center: 水平方向の中央揃え
  • left: 左揃え
  • right: 右揃え

• 垂直方向の値:

  • center：垂直中央揃え
  • top：上揃え
  • bottom：下揃え

文法:

<code class="css">background-position: horizontal-value vertical-value;</code>

例:

<code class="css">body {
  background-image: url("background.jpg");
  background-position: center center;
}</code>

その他の注意事項:

• 単一の値を指定すると、水平位置と垂直位置の両方に適用されます。
• パーセンテージ値 (背景画像のサイズに対する) または長さの値 (ピクセルまたは em 単位) を使用できます。
• キーワード initial および inherit を使用して、それぞれ値を初期値にリセットするか、親要素の値を継承することもできます。

ヒント:

• パーセント値を使用する場合は、その値によって背景画像がコンテナの境界を超えないようにしてください。
• 背景画像のアスペクト比がコンテナとは異なる場合は、歪みを防ぐために、background-size プロパティを使用して画像のサイズを変更します。

以上がCSSで背景画像を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。