Bagaimana untuk Membuat Imej Latar Belakang Responsif Skrin Penuh dalam CSS?

Mencapai Imej Latar Belakang Responsif Skrin Penuh Menggunakan CSS

Dalam usaha anda untuk menetapkan imej sebagai latar belakang skrin penuh untuk halaman web anda, anda telah menghadapi masalah: imej tidak menutup halaman sepenuhnya dan berulang di hujung paling kanan. Begini cara anda boleh menyelesaikannya menggunakan teknik CSS:

Penyelesaian 1: Kaedah Penutup

Sifat bersaiz latar belakang boleh digunakan untuk mengawal saiz imej latar belakang. Dalam kes ini, menggunakan penutup nilai akan memastikan bahawa imej meliputi keseluruhan halaman, walaupun ia bermakna meregangkan atau memangkas imej agar muat:

background-size: cover;

Untuk memastikan imej dipusatkan secara mendatar dan menegak, anda boleh menggunakan sifat kedudukan latar belakang dengan nilai 50% 50%:

background-position: 50% 50%;

Penyelesaian 2: Lampiran Tetap

Untuk menghalang imej latar belakang daripada menatal dengan kandungan halaman, anda boleh tetapkan sifat lampiran latar belakang kepada tetap. Ini akan membetulkan imej pada tempatnya, membolehkan halaman menatal di belakangnya:

background-attachment: fixed;

Sintaks Pendek

Anda boleh menulis versi singkatan bagi kedua-dua penyelesaian menggunakan sintaks berikut:

background: url(image.jpg) fixed 50% / cover;

di mana / memisahkan sifat kedudukan latar belakang dan saiz latar belakang.

Keserasian Safari

Perhatikan bahawa Safari mempunyai pepijat dengan sintaks trengkas yang diterangkan di atas. Untuk menggunakannya dalam Safari, anda harus memisahkan sifat seperti berikut:

background-image: url(image.jpg);
background-attachment: fixed;
background-position: 50% 50%;
background-size: cover;

Dengan melaksanakan teknik ini, imej latar belakang anda kini akan menutup sepenuhnya halaman dan kekal di tengah, memberikan latar belakang yang menarik dan responsif secara visual untuk anda laman web.

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