Background-attachment - CSS-Tricks

background-attachmentProprietatea în CSS Specifică modul în care să se deplaseze în raport cu fundalul imaginii curente.

Există trei valori: scroll, fixedși local. Cel mai bun mod de a explica acest lucru este prin demonstrație (încercați să derulați fundalurile individuale):

Vedeți demo-ul atașamentului Pen Background de Timothy Miller (@tjacobdesign) pe CodePen.

Există două vizualizări diferite la care să vă gândiți atunci când vorbiți background-attachment: vizualizarea principală (fereastra browserului) și vizualizarea locală (puteți vedea acest lucru în demo-ul de mai sus).

scrolleste valoarea implicită. Derulează cu vizualizarea principală, dar rămâne fix în interiorul vizualizării locale.

fixedrămâne fix indiferent de ce. Este cam ca o fereastră fizică: deplasarea în jurul ferestrei îți schimbă perspectiva, dar nu se schimbă acolo unde lucrurile sunt în afara ferestrei.

locala fost inventat deoarece scrollvaloarea implicită acționează ca un fundal fix. Derulează atât cu vizualizarea principală, cât și cu vizualizarea locală. Există câteva lucruri destul de interesante pe care le puteți face cu el.

Legate de

clip de fundal
culoare de fundal
imagine de fundal
fundal-origine
fundal-poziție
fundal-repetare
dimensiunea fundalului

Mai multe resurse

CSS3 Spec
MDN

Suport pentru browser

Valorile fixedși scrollvalorile sunt acceptate peste tot, deși fixedse pot comporta ciudat pe mobil. localare acest suport pentru browser:

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.