Bagaimana untuk Membetulkan Isu Imej Latar Belakang Skrin Penuh pada Peranti Mudah Alih?

Menyelesaikan Masalah Imej Latar Belakang pada Peranti Mudah Alih

Apabila mencipta halaman web di mana imej latar belakang memanjang ke skrin penuh, mengekalkan nisbah bidangnya, dan kekal semasa menatal, kod CSS seperti berikut mungkin digunakan:

HTML {
  background: url(photos/2452.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Walau bagaimanapun, memohon kod ini pada peranti mudah alih, seperti iPhone atau iPad, boleh mengakibatkan imej latar belakang menjadi besar dan berulang jika ditatal cukup jauh.

Penyelesaian terletak pada mencipta elemen pseudo "sebelum" sebagai sebahagian daripada badan HTML , seperti yang dilihat di bawah:

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Adalah penting untuk memastikan nilai indeks z unsur pseudo "sebelum" ditetapkan kepada negatif nombor (mis., -10), kerana indeks z lalai untuk elemen akar HTML ialah 0. Nilai negatif ini meletakkan latar belakang sebagai lapisan paling rendah.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Isu Imej Latar Belakang Skrin Penuh pada Peranti Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!