Bagaimana untuk Membetulkan Imej Latar Belakang Skrin Penuh Berulang pada Peranti Mudah Alih Tanpa JavaScript?

Latar Belakang Penyelesaian Masalah: Memperbaiki Isu Tiada Ulangan pada Peranti Mudah Alih

Masalah:

Pengguna menghadapi kesukaran untuk melaksanakan sepenuhnya- imej latar belakang skrin dengan kedudukan tetap pada peranti mudah alih (iPhone dan iPad). Walaupun menggunakan CSS untuk penggayaan latar belakang, imej kelihatan bersaiz besar dan cenderung berulang apabila menatal ke bawah.

Penyelesaian:

Untuk menangani isu ini, penyelesaian baru telah muncul yang menghapuskan keperluan untuk JavaScript. Memperkenalkan coretan CSS baharu:

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

Penjelasan:

• Isi:sebelum unsur pseudo mencipta elemen tambahan sebelum kandungan dokumen HTML .
• Kedudukan mutlak memastikan elemen kekal dalam kedudukan tetap berbanding dengan viewport.
• Z-indeks negatif (-10) membolehkan elemen muncul di belakang kandungan biasa halaman.
• Imej latar belakang, peletakan, penskalaan dan penetapannya adalah sama dengan CSS asal yang digunakan untuk penyemak imbas desktop.

Adalah penting untuk ambil perhatian bahawa teknik ini bebas awalan vendor, menghapuskan isu keserasian merentas pelayar.

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