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

Menggunting Imej Latar Belakang dengan CSS: Memahami Kulit Saiz Latar Belakang dan Lampiran Latar Belakang Ditetapkan

Apabila menggunakan imej latar belakang dalam senarai angka, menetapkan kedua-dua saiz latar belakang: penutup dan lampiran latar belakang: tetap boleh membawa kepada isu keratan apabila terdapat offset. Walaupun tingkah laku ini wujud dalam kedudukan tetap dalam CSS, kami akan meneroka penyelesaian CSS sahaja untuk mengurangkan isu ini.

Mekanik CSS:

Gabungan lampiran latar belakang: tetap dan latar belakang -saiz: penutup menyebabkan imej latar belakang berkelakuan sebagai imej "tetap" relatif port pandangan, dan nilai penutup dikira relatif kepada saiz port pandangan, bukan elemen. Ini menerangkan sebab imej dilindungi dengan betul apabila elemen memenuhi port pandangan tetapi dipangkas apabila lebih kecil.

Penyelesaian Cadangan:

Malangnya, penyelesaian CSS tulen tidak mungkin kerana kedudukan tetap tidak konsisten dengan tingkah laku penjajaran yang dikehendaki. Walau bagaimanapun, menggunakan pendengar acara JavaScript yang terikat pada acara tatal boleh mensimulasikan kedudukan tetap dan mengekalkan penjajaran yang diingini.

Secara khusus, kami akan mengikat pendengar acara tatal dan mengemas kini sifat kedudukan latar belakang secara manual berdasarkan tatal semasa kedudukan untuk mencapai kesan kedudukan tetap semasa masih mengira saiz latar belakang: penutup berbanding elemen bekas.

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