Mengapa Imej Latar Belakang Tetap Saya Rosak pada Mudah Alih, dan Bagaimana Saya Boleh Membaikinya dengan CSS Sahaja?

Isu Latar Belakang Tetap pada Mudah Alih: Menyelesaikan Penskalaan dan Ulangan

Dalam membangunkan halaman web, anda mungkin menghadapi cabaran dalam menyesuaikan imej latar belakang tetap pada mudah alih peranti. Penyelesaian yang telah terbukti berkesan pada penyemak imbas desktop, yang melibatkan penggunaan sifat CSS seperti saiz latar belakang: penutup dan latar belakang: pusat pusat tanpa ulangan ditetapkan, gagal menghasilkan hasil yang diinginkan pada iPhone dan iPad.

Kepada menangani isu ini, penyelesaian yang bijak telah muncul yang menghapuskan keperluan untuk JavaScript dan menawarkan penyelesaian yang mudah:

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

Penyelesaian ini berfungsi dengan mencipta unsur pseudo yang bertindak sebagai latar belakang tetap, diletakkan di belakang semua elemen halaman lain. Ia menggunakan banyak sifat CSS yang serupa dengan yang digunakan untuk elemen HTML, memastikan ketekalan dalam tingkah laku.

Perhatikan bahawa sifat indeks-z ditetapkan kepada nilai negatif -10, dan ini penting untuk pseudo- elemen untuk muncul sebagai latar belakang. Nilai indeks z lalai untuk elemen akar HTML ialah 0, dan oleh itu nilai negatif memastikan elemen pseudo diletakkan di belakang setiap elemen lain pada halaman.

Atas ialah kandungan terperinci Mengapa Imej Latar Belakang Tetap Saya Rosak pada Mudah Alih, dan Bagaimana Saya Boleh Membaikinya dengan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!