Mengapakah imej latar belakang terpotong saya secara tidak dijangka dipangkas apabila menggunakan `saiz latar belakang: penutup` dan `lampiran latar belakang: tetap`?

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

Apabila menggunakan saiz latar belakang sifat CSS: kulit dan lampiran latar belakang: ditetapkan pada elemen kontena, imej latar belakang mungkin dipotong secara tidak dijangka jika elemen itu bukan saiz penuh port pandangan. Ini disebabkan oleh gabungan dua sifat, seperti yang dijelaskan di bawah.

Kesan lampiran latar belakang: tetap

lampiran latar belakang: tetap menjadikan imej latar belakang berkelakuan seperti kedudukan: elemen tetap , bermakna ia bukan lagi sebahagian daripada aliran biasa dokumen dan kekal pegun berbanding dengan port pandangan.

Interaksi dengan saiz latar belakang: penutup

saiz latar belakang: penutup menskalakan imej latar belakang untuk menutup keseluruhan elemen bekas. Apabila digabungkan dengan lampiran latar belakang: tetap, ini bermakna imej diskalakan untuk meliputi keseluruhan port pandangan, bukan hanya elemen kontena.

Keratan imej latar belakang

Jika elemen kontena ialah lebih kecil daripada ruang pandang, imej latar belakang akan dipangkas agar sesuai dengan elemen bekas secara menegak. Walau bagaimanapun, ia masih akan diskalakan secara mendatar untuk menampung lebar penuh viewport. Ini boleh mengakibatkan keratan imej di sebelah kiri dan kanan.

Penyelesaian

Malangnya, tiada cara untuk mencapai kesan yang diingini (imej dipotong secara menegak atau mendatar tetapi bukan kedua-duanya, dan berpusat oleh elemen bekas) menggunakan CSS tulen. Ini adalah kerana cara asas kedudukan tetap berfungsi dalam CSS.

Untuk mencapai kesan yang diingini, anda perlu menggunakan JavaScript untuk mengemas kini sifat kedudukan latar belakang secara manual berbanding kedudukan tatal tetingkap, mensimulasikan tetap kedudukan semasa masih mengira saiz latar belakang: penutup relatif kepada elemen bekas.

Atas ialah kandungan terperinci Mengapakah imej latar belakang terpotong saya secara tidak dijangka dipangkas apabila menggunakan `saiz latar belakang: penutup` dan `lampiran latar belakang: tetap`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!