Bagaimana untuk Kembangkan Imej Latar Belakang dalam Safari Mudah Alih Tanpa Menggunakan `background-size: cover`?

Memperluas Imej Latar Belakang dalam Safari Mudah Alih Tanpa Menggunakan CSS saiz latar belakang: penutup

Manakala CSS saiz latar belakang: penutup biasanya digunakan untuk mengembangkan imej latar belakang, senario tertentu, terutamanya pada peranti iOS, boleh memberikan cabaran. Satu isu sedemikian melibatkan pengembangan imej latar belakang untuk menutup div yang boleh berbeza-beza lebar berdasarkan saiz port pandangan dan ketinggian kandungan.

Punca utama masalah ini bukan saiz latar belakang: penutup tetapi lampiran latar belakang: tetap. Sifat ini menghalang imej latar belakang daripada bergerak dengan kandungan halaman, mewujudkan tingkah laku yang tidak diingini pada peranti mudah alih.

Untuk menyelesaikan isu ini, pertimbangkan untuk menggunakan pertanyaan media untuk menyasarkan peranti iPhone secara khusus dan tetapkan sifat lampiran latar belakang untuk menatal . Ini membolehkan imej latar belakang menatal bersama-sama dengan halaman, menyelesaikan masalah dengan berkesan.

Berikut ialah contoh kod CSS dengan pertanyaan media yang menyasarkan peranti iPhone:

.cover {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

Dengan menggabungkan ini pertanyaan media, anda boleh memastikan bahawa imej latar belakang anda bukan sahaja akan berkembang untuk meliputi keseluruhan div, tetapi juga menyesuaikan dengan anggun pada saiz port pandangan yang berbeza pada kedua-dua desktop dan mudah alih peranti.

Atas ialah kandungan terperinci Bagaimana untuk Kembangkan Imej Latar Belakang dalam Safari Mudah Alih Tanpa Menggunakan `background-size: cover`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!