Bagaimana untuk Membetulkan Isu Penskalaan Imej Latar Belakang pada Peranti Mudah Alih Hanya Menggunakan CSS?

Isu Penskalaan Imej Latar Belakang Tetap pada Peranti Mudah Alih

Menggunakan gaya CSS yang disediakan dalam soalan kepada elemen HTML mencapai kesan penskalaan yang diingini imej latar belakang agar sesuai dengan keseluruhan skrin, mengekalkan nisbah bidangnya dan kekal pada tempatnya pada pelayar desktop. Walau bagaimanapun, gaya ini gagal menghasilkan hasil yang sama pada iPhone dan iPad. Pada peranti tersebut, imej latar belakang melangkaui port pandangan, dan ia mula berulang jika ditatal ke bawah secukupnya.

Untuk menangani isu ini, penyelesaian inovatif telah dibangunkan yang menghapuskan keperluan untuk JavaScript:

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 mencipta elemen baharu menggunakan kelas pseudo :before, yang diletakkan secara mutlak pada keseluruhan elemen badan. Imej latar belakang diberikan kepada elemen ini dengan sifat penskalaan dan peletakan yang dikehendaki. Dengan menetapkan nilai indeks z negatif sebanyak -10, elemen ini menjadi latar belakang untuk keseluruhan halaman, memastikan ia kekal di belakang semua kandungan lain.

Teknik ini menyediakan kaedah yang mudah dan berkesan untuk membetulkan imej latar belakang pada mudah alih peranti, menangani batasan yang dihadapi dengan gaya CSS asal.

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