Rumah  >  Artikel  >  hujung hadapan web  >  Adakah `saiz latar belakang: penutup` dan `lampiran latar belakang: tetap` menyebabkan keratan imej latar belakang, dan bagaimanakah ia boleh diselesaikan?

Adakah `saiz latar belakang: penutup` dan `lampiran latar belakang: tetap` menyebabkan keratan imej latar belakang, dan bagaimanakah ia boleh diselesaikan?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-27 05:41:09647semak imbas

Does `background-size: cover` and `background-attachment: fixed` cause background image clipping, and how can it be solved?

Saiz Latar Belakang CSS: Latar Belakang Penutup-Lampiran: Imej Latar Belakang Keratan Tetap

Bolehkah anda menghadapi situasi di mana imej latar belakang dengan saiz latar belakang : penutup dan lampiran latar belakang: tetap boleh dipotong?

The Isu:
Seperti yang dicadangkan oleh soalan, dalam senario dengan angka menggunakan imej latar belakang, gabungan saiz latar belakang: penutup dan lampiran latar belakang: tetap membawa kepada keratan imej latar belakang apabila terdapat offset. Ini ialah gelagat CSS yang wujud, seperti yang didokumentasikan oleh Mozilla.

Matlamat:
Hasil yang diingini adalah untuk imej dipotong sama ada secara menegak atau mendatar, tetapi bukan kedua-duanya, sambil mengekalkan penjajaran berpusat dalam rajah itu sendiri.

Penyelesaian:
Malangnya, mencapai keputusan ini semata-mata dengan CSS tidak mungkin. Seperti yang diperincikan dalam jawapan, kedudukan tetap dalam CSS mewujudkan pemutusan antara imej latar belakang dan elemen bekas. Oleh itu, walaupun dengan nilai penutup, saiz imej ditentukan secara relatif kepada viewport dan bukannya dimensi rajah.

JavaScript Alternatif:
Penyelesaian yang disyorkan ialah menggunakan JavaScript untuk mensimulasikan kesan kedudukan tetap semasa mengira saiz latar belakang: penutup relatif kepada elemen angka. Ini melibatkan mendengar acara tatal dan melaraskan kedudukan latar belakang secara manual untuk dipadankan dengan tatal paparan.

Atas ialah kandungan terperinci Adakah `saiz latar belakang: penutup` dan `lampiran latar belakang: tetap` menyebabkan keratan imej latar belakang, dan bagaimanakah ia boleh diselesaikan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn