Bagaimana untuk Memusatkan Imej Latar Belakang dengan Sempurna dalam CSS?-tutorial css-php.cn

Bagaimana untuk Memusatkan Imej Latar Belakang dengan Sempurna dalam CSS?

Mary-Kate Olsen

Lepaskan： 2024-11-29 16:05:13

asal

196 orang telah melayarinya

How to Perfectly Center a Background Image in CSS?

Memusatkan Imej Latar Belakang dengan CSS

Isu:

Imej latar belakang mencabar untuk dipusatkan dengan tepat . Dengan kod CSS yang disediakan:

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

Salin selepas log masuk

jubin imej dan berada di tengah, tetapi hanya kelihatan sebahagiannya. Matlamatnya adalah untuk memusatkan imej sepenuhnya, malah pada skrin yang lebih besar.

Penyelesaian:

Untuk memusatkan imej latar belakang dengan betul, gunakan sifat CSS berikut:

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

Salin selepas log masuk

background-repeat:no-repeat menghalang imej daripada jubin.
kedudukan latar belakang: tengah tengah memusatkan imej secara mendatar dan menegak.

Pendekatan Alternatif:

Sebagai alternatif, pertimbangkan untuk menggunakan

elemen dengan imej latar belakang dan menggunakan sifat z-index untuk menjadikannya sebagai latar belakang. Pendekatan ini boleh menjadi lebih mudah untuk dipusatkan daripada menggunakan imej latar belakang pada tag.

Petua Tambahan:

Gunakan nilai piksel untuk kedudukan latar belakang untuk memastikan pemusatan yang tepat.
Jika anda telah menetapkan ketinggian minimum hingga 100%, anda juga boleh menggunakan 50% untuk kedudukan latar belakang secara mendatar.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Imej Latar Belakang dengan Sempurna dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!