Hack lampiran latar belakang tetap

Mahu latar belakang tetap yang tetap diletakkan semasa menatal? background-attachment: fixed dalam CSS sering gagal dalam pelayar mudah alih. Berikut adalah penyelesaian, "hack," untuk mencapai kesan ini.

Masalahnya

Mari kita periksa isu dengan dua jenis latar belakang: kecerunan linear dan imej.

Kecerunan linear

Untuk kecerunan tetap pada tatal, kami mungkin menggunakan CSS ini:

 badan {
  Latar Belakang: Linear-Gradient (335Deg, RGBA (255,140,107,1) 0%, RGBA (255,228,168,1) 100%);
  Latar Belakang-Attachment: Tetap;
  Latar Belakang: Pusat;
  Latar Belakang berulang: tidak berulang;
  Ketinggian: 100VH;
}

Pada Android Chrome dan Firefox, skrol kecerunan, kemudian melompat. Ini seolah-olah berkaitan dengan kesukaran penyemak imbas semula membuat kecerunan dalam masa nyata apabila bar URL menyembunyikan/muncul. IOS Safari mempamerkan tingkah laku yang sama.

Imej latar belakang

Masalahnya sama dengan gambar:

 badan {
  latar belakang: url (../ aset/test_pic.jpg);
  Latar Belakang berulang: tidak berulang;
  Latar Belakang: Cover;
  Latar Belakang: Pusat;
  Latar Belakang-Attachment: Tetap;
  Ketinggian: 100VH;
}

background-attachment: fixed juga mengabaikan harta height , mengira kedudukan berbanding dengan viewport, bukan ketinggian elemen. Ini mungkin kerana background-attachment: fixed menggunakan viewport terkecil , manakala elemen menggunakan yang terbesar . Unit Viewport (VH) tidak mengubah saiz apabila bar URL mengubah penglihatan.

caniuse menyoroti ketidakkonsistenan penyemak imbas dengan background-attachment: fixed .

Penyelesaian (hack)

Penyelesaian ini melibatkan menghapuskan background-attachment: fixed dan menggunakan unsur-unsur yang berasingan. Jika background-attachment: fixed menggunakan viewport terkecil, mari kita gunakan elemen yang menggunakan yang terbesar.

Buat dua div: Satu untuk latar belakang dan satu untuk kandungan:

<div class="bg"></div>
<div class="content">
  
</div>

Gaya mereka seperti ini:

 .bg {
  Latar Belakang: Linear-Gradient (335Deg, RGBA (255,140,107,1) 0%, RGBA (255,228,168,1) 100%);
  Latar Belakang berulang: tidak berulang;
  Latar Belakang: Pusat;
  Ketinggian: 100VH;
  lebar: 100VW;
  Kedudukan: Tetap;
  Z -indeks: -1; / * Pilihan */
}

.content {
  Kedudukan: Mutlak;
  margin-top: 5rem;
  Kiri: 50%;
  Transform: TranslateX (-50%);
  lebar: 80%;
}

Ini berfungsi sama untuk imej latar belakang:

 .img {
  latar belakang: url ('../ aset/test_pic.jpg');
  Latar Belakang: Pusat;
  Latar Belakang berulang: tidak berulang;
  Latar Belakang: Cover;
  Kedudukan: Tetap;
  Ketinggian: 100VH;
  lebar: 100VW;
}

Walaupun menatal kecil mungkin berlaku apabila bar URL menyembunyikan, isu -isu utama diselesaikan.

Pertimbangan

"Hack" ini menggunakan a<div> bukannya<code><img alt="Hack lampiran latar belakang tetap" > Tag, yang mungkin menjejaskan semantik dan aksesibiliti. Sekiranya imej itu penting untuk makna, menggunakan<img alt="Hack lampiran latar belakang tetap" > Dengan teks alt yang betul adalah lebih baik, walaupun ia bermakna hack tidak akan berfungsi dengan sempurna. Bar navigasi bawah yang secara automatik mungkin masih menimbulkan masalah. Dalam kes sedemikian, JavaScript mungkin diperlukan.

Atas ialah kandungan terperinci Hack lampiran latar belakang tetap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!