Untuk menetapkan imej latar belakang penuh dengan CSS, gunakan saiz latar belakang: penutup, tetapkan HTML dan ketinggian badan dengan betul, dan pastikan responsif di seluruh peranti. 1. Memohon saiz latar belakang: Tutup untuk skala imej sambil mengekalkan nisbah aspek. 2. Tetapkan HTML dan Body {Height: 100%; Margin: 0; } Untuk memastikan liputan penuh halaman. 3. Tambah sandaran seperti warna latar belakang dan imej yang dioptimumkan untuk prestasi. 4. Gunakan Objek-Fit: Tutup dengan tag IMG untuk kawalan yang lebih baik pada mudah alih jika latar belakang tetap berkelakuan tidak konsisten.

Menetapkan imej latar belakang halaman penuh dengan CSS adalah salah satu daripada tugas-tugas umum yang setiap pemaju front-end berakhir pada satu ketika. Ia tidak rumit, tetapi terdapat beberapa perkara penting untuk mendapatkan hak -terutamanya jika anda mahu ia kelihatan baik pada semua saiz skrin dan peranti.

Berikut adalah cara untuk melakukannya dengan betul tanpa menghadapi masalah seperti peregangan, jubin, atau imej yang tidak meliputi keseluruhan halaman.

Gunakan background-size: cover untuk liputan penuh

Ini mungkin bahagian yang paling penting. Jika anda mahu imej latar belakang anda sentiasa mengisi seluruh tetingkap penyemak imbas, tidak kira saiz skrin, gunakan:

 badan {
  Margin: 0;
  Min-ketinggian: 100VH;
  Latar Belakang: URL ('your-image.jpg') pusat pusat no-repeat tetap;
  Latar Belakang: Cover;
}

• no-repeat jubin.
• center center memastikan imej berpusat di kedua -dua menegak dan mendatar.
• fixed menjadikan latar belakang tinggal di tempat sementara skrol kandungan (pilihan).
• cover skala imej untuk menutup seluruh viewport sambil mengekalkan nisbah aspek.

Nota: Sesetengah pelayar yang lebih tua mungkin tidak menyokong background-size: cover , tetapi yang moden lakukan.

Tetapkan HTML dan ketinggian badan dengan betul

Salah satu kesilapan yang paling biasa adalah lupa untuk menetapkan ketinggian elemen html dan body . Secara lalai, mereka mungkin tidak mengambil ketinggian penuh skrin.

 html, badan {
  Ketinggian: 100%;
  Margin: 0;
}

Tanpa ini, imej latar belakang anda hanya boleh meliputi sebahagian halaman, terutamanya jika kandungannya pendek.

Juga pastikan body anda mempunyai min-height: 100vh jika anda menggunakan flexbox atau teknik susun atur lain yang bergantung pada ketinggian paparan penuh.

Tambah sandaran dan peningkatan

Walaupun background-size: cover berfungsi dengan baik, kadang-kadang anda mungkin ingin menambah beberapa tambahan untuk meningkatkan penampilan dan prestasi.

• Gunakan imej berkualiti tinggi , tetapi memampatkannya untuk memuat lebih cepat.

• Pertimbangkan untuk menambah background-color sebagai sandaran sekiranya imej gagal dimuatkan.

   Latar Belakang: #000 URL ('image.jpg') pusat pusat tidak berulang;

• Untuk kawalan yang lebih baik ke atas kedudukan imej, cuba gunakan background-position . Sebagai contoh, background-position: top center; boleh membantu menyerlahkan bahagian tertentu imej.

• Sekiranya anda melayari teks atau butang di atas imej, pertimbangkan untuk menggunakan ::before dengan latar belakang separa telus untuk menjadikan kandungan lebih mudah dibaca.

Berhati -hati untuk tingkah laku mudah alih

Pada peranti mudah alih, terutamanya iOS, background-attachment: fixed mungkin tidak berfungsi seperti yang diharapkan. Menatal boleh menyebabkan latar belakang berkelakuan berbeza daripada di desktop.

Jika anda memerlukan tingkah laku yang konsisten di semua peranti:

• Elakkan fixed kecuali ia penting.
• Atau bungkus imej anda dalam tag img dan letakkannya di belakang segala yang lain. Itu memberi anda lebih banyak kawalan.

 <div class = "latar belakang">
  <img src = "image.jpg" alt = "latar belakang">
</div>

 .background {
  Kedudukan: Tetap;
  Atas: 0;
  Kiri: 0;
  Ketinggian: 100%;
  Lebar: 100%;
  Z -indeks: -1;
  Limpahan: Tersembunyi;
}

.background img {
  Lebar: 100%;
  Ketinggian: 100%;
  Objek-Fit: Cover;
}

Kaedah ini juga membolehkan anda menggunakan object-fit , yang bertindak sama dengan background-size: cover tetapi memberi anda lebih fleksibel apabila bekerja dengan elemen imej sebenar.

Jadi ya, menetapkan imej latar belakang penuh dengan CSS tidak sukar apabila anda mengetahui asas-asasnya. Ingatlah untuk mengendalikan saiz badan dan HTML, gunakan background-size: cover , dan ujian pada peranti yang berbeza. Segala -galanya hanya menggilap bergantung kepada apa yang anda cuba capai.

Atas ialah kandungan terperinci Tutorial CSS untuk mencipta gambar latar belakang halaman penuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!