Bagaimana Saya Boleh Menghalang Keratan Imej Latar Belakang dengan CSS `saiz latar belakang: penutup` dan `lampiran latar belakang: tetap`?

Memotong Imej Latar Belakang dengan saiz latar belakang CSS: penutup dan lampiran latar belakang: tetap

Apabila menghadapi isu imej latar belakang terpotong menggunakan CSS saiz latar belakang: penutup dan lampiran latar belakang: tetap, adalah penting untuk memahami mekanisme di sebalik ini sifat.

saiz latar belakang: penutup menskalakan imej untuk mengisi keseluruhan elemen, manakala lampiran latar belakang: tetap melabuhkan imej latar belakang ke port pandangan. Ini bermakna imej akan kekal di tempatnya apabila elemen menatal.

Walau bagaimanapun, gabungan ini membawa kepada keratan apabila elemen lebih kecil daripada port pandangan. Ini kerana saiz latar belakang: penutup mengira saiz imej berbanding dengan port pandangan, bukan elemen.

Untuk menangani perkara ini, CSS sahaja tidak mencukupi, kerana ini adalah had reka bentuk tetap lampiran latar belakang. Untuk mengekalkan kedudukan dan saiz imej dalam elemen, JavaScript diperlukan.

Secara khusus, anda perlu:

1. Alih keluar latar belakang- lampiran: tetap: Ini akan mengalihkan imej latar belakang untuk berkelakuan seperti biasa dalam halaman aliran.
2. Gunakan JavaScript untuk mendengar acara tatal tetingkap: Ini akan membolehkan anda melaraskan sifat kedudukan latar belakang secara dinamik.
3. Kira kedudukan latar belakang baharu : Tentukan offset elemen dari viewport dan gunakan pelarasan yang sesuai pada kedudukan latar belakang harta.

Dengan melaksanakan penyelesaian ini dalam JavaScript, anda boleh mensimulasikan kesan latar belakang tetap sambil mengekalkan tingkah laku yang diingini dalam elemen.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menghalang Keratan Imej Latar Belakang dengan CSS `saiz latar belakang: penutup` dan `lampiran latar belakang: tetap`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!