background-attachmentĪpašums CSS nosaka, kā pārvietot fona attiecībā pret skatpunktu.
Ir trīs vērtības: scroll, fixed, un local. Labākais veids, kā to izskaidrot, ir, izmantojot demonstrāciju (mēģiniet ritināt atsevišķus fonus):
Skatiet Timothy Miller (@tjacobdesign) Pen fona pielikuma demonstrāciju vietnē CodePen.
Ir divi dažādi skati, par kuriem jādomā, runājot background-attachment: galvenais skats (pārlūka logs) un vietējais skats (to var redzēt iepriekš redzamajā demonstrācijā).
scrollir noklusējuma vērtība. Tas ritina ar galveno skatu, bet paliek fiksēts lokālajā skatā.
fixedpaliek fiksēts neatkarīgi no tā. Tas ir kaut kas līdzīgs fiziskam logam: pārvietojoties pa logu, mainās jūsu perspektīva, taču tas nemainās, ja lietas atrodas ārpus loga.
localtika izgudrots, jo noklusējuma scrollvērtība darbojas kā fiksēts fons. Tas ritina gan ar galveno, gan lokālo skatu. Ir dažas diezgan atdzist lietas, ko jūs varat darīt ar to.
Saistīts
- fona klips
- fona krāsa
- fona attēls
- fona izcelsme
- background-position
- fona atkārtojums
- fona lielums
Vairāk resursu
- CSS3 Spec
- MDN
Pārlūka atbalsts
fixedUn scrollvērtības tiek atbalstītas visur, lai gan fixedvar uzvesties dīvaini uz mobilo. localir šis pārlūka atbalsts:
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 4 | 25 | 9 | 12 | 5 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.2–4.3 | 14.0-14.4 |
Pārlūks Chrome-on-Android atbalsta local, bet vecais Android pārlūks to nedara.