Bagaimana untuk Memusatkan Imej Latar Belakang dengan Sempurna dalam 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;
}

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;

• 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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn