Các background-attachmentbất động sản trong quy định cụ thể CSS làm thế nào để di chuyển các nền tương đối so với khung nhìn.
Có ba giá trị: scroll, fixed, và local. Cách tốt nhất để giải thích điều này là thông qua bản demo (thử cuộn các nền riêng lẻ):
Xem bản trình diễn tệp đính kèm Nền bút của Timothy Miller (@tjacobdesign) trên CodePen.
Có hai chế độ xem khác nhau cần nghĩ đến khi nói về background-attachment: chế độ xem chính (cửa sổ trình duyệt) và chế độ xem cục bộ (bạn có thể xem điều này trong bản trình diễn ở trên).
scrolllà giá trị mặc định. Nó cuộn với chế độ xem chính, nhưng vẫn cố định bên trong chế độ xem cục bộ.
fixedvẫn cố định không có vấn đề gì. Nó giống như một cửa sổ vật lý: di chuyển xung quanh cửa sổ sẽ thay đổi góc nhìn của bạn, nhưng nó không thay đổi vị trí của mọi thứ bên ngoài cửa sổ.
localđược phát minh vì scrollgiá trị mặc định hoạt động giống như một nền cố định. Nó cuộn cả với chế độ xem chính và chế độ xem cục bộ. Có một số điều khá thú vị mà bạn có thể làm với nó.
Có liên quan
- nền-clip
- màu nền
- hình nền
- nền-nguồn gốc
- nền-vị trí
- Bối cảnh Lặp lại
- kích thước nền
Nhiêu tai nguyên hơn
- Thông số CSS3
- MDN
Hỗ trợ trình duyệt
Các fixedvà scrollgiá trị được hỗ trợ ở mọi nơi, mặc dù fixedcó thể hoạt động lạ trên thiết bị di động. localcó hỗ trợ trình duyệt này:
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 4 | 25 | 9 | 12 | 5 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.2-4.3 | 14.0-14.4 |
Chrome trên Android hỗ trợ local, nhưng trình duyệt Android cũ thì không.