Div を使用せずに CSS で背景画像を完全に中央に配置するにはどうすればよいですか?

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

div を使用せずに CSS を使用して背景画像を中央に配置しようとすると、ユーザーが次の問題に遭遇する可能性があります。画像が中央ではなく「上に移動」して表示されます。この問題に対処するには、いくつかの解決策が考えられます。

次の CSS 変更により、背景画像を適切に中央に配置できます:

body {
    background-image: url(path-to-file/img.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

あるいは、目的の画像を含む div を作成し、それを使用することもできます。 z-index を使用して背景として指定します。この方法は、体の背景画像よりも中央に配置するのが比較的簡単です。

これらのアプローチが失敗した場合は、ピクセル値を使用して画像を中央に配置することを試みることができます。例:

body {
    background-repeat: no-repeat;
    background-position: 0 100px;
}

また、体の最小の高さが 100% に設定されている場合は、パーセンテージを使用することもできます:

body {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/images2.jpg);
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100%;
}

以上がDiv を使用せずに CSS で背景画像を完全に中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。