CSS を使用して背景画像を正確に中央に配置するにはどうすればよいですか?

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

背景画像を中央に配置するために、次の CSS コードが使用されました。

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

コードは実際にページ全体に画像を並べて表示しますが、結果は部分的なビューになります。画像の上部が隠れています。目標は、21 インチの画面でも完全な視認性を維持しながら、完璧なセンタリングを実現することです。

この正確な位置合わせを実現するには、CSS を次のように調整することをお勧めします。

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

この変更背景の位置を水平方向と垂直方向の両方で画面の中心に明示的に設定します。

または、画像の div コンテナを作成し、z-index を使用します。それを背景として設定すると、センタリングのプロセスを簡素化できます。

別のアプローチには、background-position プロパティでピクセル値を使用することが含まれます。

background-position: 0 100px; /*use a pixel value that will center it*/

あるいは、ボディの最小高さが次のように定義されている場合、 100%、50% はセンタリングに使用できます:

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%;
}

これらの調整を次の目的に実装します。背景画像を簡単に正確に中央に配置できます。

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