Bagaimanakah Saya Boleh Memusatkan Imej Latar Belakang Dengan Tepat Menggunakan CSS?

Memusatkan Imej Latar Belakang dengan CSS Dengan Tepat

Dalam usaha untuk menjajarkan imej latar belakang secara berpusat, kod CSS berikut telah digunakan:

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

Walaupun kod itu memang menjubinkan imej merentasi seluruh halaman, hasilnya ialah paparan separa dengan bahagian atas imej dikaburkan. Matlamatnya adalah untuk mencapai pemusatan yang sempurna, mengekalkan keterlihatan penuh walaupun pada skrin 21".

Untuk mencapai penjajaran tepat ini, pelarasan berikut pada CSS disyorkan:

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

Pengubahsuaian ini secara eksplisit menetapkan kedudukan latar belakang ke tengah skrin secara mendatar dan menegak.

Sebagai alternatif, mencipta bekas div untuk imej dan menggunakan indeks-z untuk menetapkannya sebagai latar belakang boleh memudahkan proses pemusatan.

Pendekatan lain melibatkan penggunaan nilai piksel dalam sifat kedudukan latar belakang:

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

Sebagai alternatif, jika ketinggian minimum badan ditakrifkan sebagai 100%, 50% boleh digunakan untuk memusatkan:

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

Laksanakan ini pelarasan untuk memusatkan imej latar belakang dengan mudah dengan ketepatan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Imej Latar Belakang Dengan Tepat Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!