Den background-attachmentegendom i CSS anger hur man flyttar bakgrunden i förhållande till visningsområdet.
Det finns tre värden: scroll, fixedoch local. Det bästa sättet att förklara detta är via demo (försök att bläddra i de enskilda bakgrunderna):
Se pennan Bakgrund bifogad demo av Timothy Miller (@tjacobdesign) på CodePen.
Det finns två olika vyer att tänka på när man pratar om background-attachment: huvudvyn (webbläsarfönster) och den lokala vyn (du kan se detta i demo ovan).
scrollär standardvärdet. Den rullar med huvudvyn, men förblir fast i den lokala vyn.
fixedförblir fast oavsett vad. Det är som ett fysiskt fönster: att flytta runt i fönstret ändrar ditt perspektiv, men det förändras inte där saker är utanför fönstret.
localuppfanns eftersom standardvärdet scrollfungerar som en fast bakgrund. Den rullar både med huvudvyn och lokalvy. Det finns några ganska coola saker du kan göra med det.
Relaterad
- bakgrund-klipp
- bakgrundsfärg
- bakgrundsbild
- bakgrund-ursprung
- bakgrundsposition
- bakgrund-upprepa
- bakgrundsstorlek
Fler resurser
- CSS3 Spec
- MDN
Webbläsarstöd
Den fixedoch scrollvärderingar stöds överallt, men fixedkan bete sig konstigt på mobilen. localhar det här webbläsarstödet:
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 4 | 25 | 9 | 12 | 5 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.2-4.3 | 14.0-14.4 |
Chrome-on-Android stöder local, men den gamla Android-webbläsaren inte.