Bagaimana untuk Membetulkan Imej Latar Belakang Kabur pada Peranti iOS 7?

Keserasian Imej Latar Belakang Tetap dengan iOS 7

Apabila ia datang untuk melaksanakan imej latar belakang tetap, adalah penting untuk memastikan keserasian merentas peranti yang berbeza dan pelayar. Walau bagaimanapun, isu tertentu boleh timbul secara khusus pada iOS 7.

Seorang pengguna baru-baru ini mengalami situasi di mana imej latar belakang pada tapak web mereka kelihatan dizum masuk dan kabur pada iPad yang menjalankan iOS 7. Pengguna memberikan kod CSS berikut:

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Untuk menyelesaikan isu ini, terdapat beberapa penyelesaian yang berpotensi:

Pilihan 1: Gunakan Latar Belakang-Lampiran

Satu pendekatan ialah menggunakan lampiran latar belakang: tatal bukannya tetap. Walaupun kaedah ini tidak akan mencapai kesan yang dimaksudkan untuk latar belakang tetap, ia akan membenarkan imej dipaparkan pada penyemak imbas mudah alih.

Pilihan 2: Gunakan Kedudukan Latar Belakang dan JavaScript

Sebagai alternatif, anda boleh menetapkan kedudukan latar belakang: tatal dan sertakan JavaScript untuk mengekalkan imej pada kedudukan yang ditatal, dengan berkesan "memalsukan" latar belakang tetap. Berikut ialah contoh pelaksanaan:

// Calculate the initial scroll position
var scrollPosition = window.scrollY;

// Add an event listener for the scroll event
window.addEventListener("scroll", function () {
  // Update the scroll position as the user scrolls
  scrollPosition = window.scrollY;

  // Set the background position to be scrolled with the window
  document.querySelector(".header").style.backgroundPosition = "center " + scrollPosition + "px";
});

Pendekatan JavaScript ini menyediakan penyelesaian dinamik yang mengekalkan kesan latar belakang tetap pada peranti iOS 7 sambil mengelak isu imej yang kabur dan dizum masuk.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Imej Latar Belakang Kabur pada Peranti iOS 7?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!