Фон-прикачен файл - CSS-трикове

В background-attachmentимота в CSS указва как да се движат на фона спрямо изгледа.

Има три стойности: scroll, fixed, и local. Най-добрият начин да обясните това е чрез демонстрация (опитайте да превъртите отделните фонове):

Вижте демонстрацията за прикачен файл на Pen Background от Тимъти Милър (@tjacobdesign) на CodePen.

Има два различни изгледа, за които трябва да мислите, когато говорите background-attachment: основният изглед (прозорец на браузъра) и локалният изглед (можете да видите това в демонстрацията по-горе).

scrollе стойността по подразбиране. Той се превърта с основния изглед, но остава фиксиран в локалния изглед.

fixedостава фиксиран, без значение какво. Това е нещо като физически прозорец: придвижването около прозореца променя вашата перспектива, но не променя там, където нещата са извън прозореца.

localе измислена, защото scrollстойността по подразбиране действа като фиксиран фон. Той се превърта както с основния изглед, така и с местния изглед. Има някои доста готини неща, които можете да направите с него.

Свързани

фонов клип
Цвят на фона
фоново изображение
фон-произход
фон-позиция
фон-повторение
размер на фона

Още ресурси

CSS3 Spec
MDN

Поддръжка на браузър

Стойностите fixedи scrollсе поддържат навсякъде, въпреки че fixedмогат да се държат странно на мобилни устройства. localима тази поддръжка на браузъра:

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.