background-attachmentCSS patikslinamos nuosavybė kaip perkelti fono palyginti su peržiūros.
Yra trys dydžiai: scroll, fixedir local. Geriausias būdas tai paaiškinti naudojant demonstracinę versiją (pabandykite slinkti atskirus fonus):
Žiūrėkite Timothy Millerio (@tjacobdesign) „Pen Background“ priedo demonstracinę versiją „CodePen“.
Kalbant apie tai reikia pagalvoti apie du skirtingus požiūrius background-attachment: pagrindinį rodinį (naršyklės langą) ir vietinį vaizdą (tai galite pamatyti aukščiau pateiktoje demonstracijoje).
scrollyra numatytoji reikšmė. Jis slenka su pagrindiniu vaizdu, bet lieka fiksuotas vietiniame vaizde.
fixedlieka fiksuotas, kad ir kas. Tai panašu į fizinį langą: judėjimas aplink langą pakeičia tavo perspektyvą, tačiau jis nesikeičia ten, kur viskas yra už lango ribų.
localbuvo sugalvotas, nes numatytoji scrollreikšmė veikia kaip fiksuotas fonas. Jis slenka tiek pagrindiniu, tiek vietiniu vaizdu. Yra keletas gana šaunių dalykų, kuriuos galite padaryti su juo.
Susijęs
- fono klipas
- fono spalva
- fonas-vaizdas
- fono kilmė
- fonas-padėtis
- fonas pakartoti
- fono dydis
Daugiau išteklių
- CSS3 Spec
- MDN
Naršyklės palaikymas
fixedIr scrollvertybės palaiko visur, nors fixedgali elgtis keistai ant mobili. localturi šį naršyklės palaikymą:
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 4 | 25 | 9 | 12 | 5 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 4.2–4.3 | 14,0–14,4 |
„Chrome-on-Android“ palaiko local, bet senoji „Android“ naršyklė - ne.