Latar belakang-lampiran - Trik CSS

The background-attachmentharta di tentukan CSS bagaimana untuk bergerak relatif latar belakang untuk viewport.

Terdapat tiga nilai: scroll, fixed, dan local. Kaedah terbaik untuk menjelaskannya adalah melalui demo (cuba tatal latar belakang individu):

Lihat demo lampiran Pen Latar Belakang oleh Timothy Miller (@tjacobdesign) di CodePen.

Terdapat dua pandangan berbeza yang perlu difikirkan ketika membincangkan background-attachment: paparan utama (tetingkap penyemak imbas), dan pandangan tempatan (anda dapat melihatnya dalam demo di atas).

scrolladalah nilai lalai. Ia menatal dengan pandangan utama, tetapi tetap dalam pandangan tempatan.

fixedtetap tetap tidak kira apa pun. Ini seperti tingkap fizikal: bergerak di sekitar tingkap mengubah perspektif anda, tetapi tidak berubah di mana keadaan berada di luar tingkap.

localdicipta kerana nilai lalai scrollbertindak seperti latar belakang tetap. Ia menatal dengan pandangan utama dan pandangan tempatan. Terdapat beberapa perkara menarik yang boleh anda lakukan dengannya.

Berkaitan

latar-klip
warna latar belakang
gambar latar belakang
latar-asal
latar belakang-kedudukan
latar belakang-ulangan
ukuran latar belakang

Lebih Banyak Sumber

Spesifikasi CSS3
MDN

Sokongan Penyemak Imbas

Yang fixeddan scrollnilai-nilai yang disokong mana-mana, walaupun fixedboleh berkelakuan pelik di telefon bimbit. localmempunyai sokongan penyemak imbas ini:

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.