Фон-вкладення - CSS-хитрощі

background-attachmentВластивість в CSS визначає , як перемістити фон щодо вікна перегляду.

Є три значення: scroll, fixed, і local. Найкращий спосіб пояснити це за допомогою демонстрації (спробуйте прокрутити окремі фони):

Дивіться демонстраційне вкладене вкладання Pen Background від Тімоті Міллера (@tjacobdesign) на CodePen.

Існує два різних погляди, про які слід подумати, говорячи про них background-attachment: головний вигляд (вікно браузера) та локальний вигляд (це ви можете побачити у демонстраційній версії вище).

scroll- значення за замовчуванням. Він прокручується з основним видом, але залишається фіксованим усередині локального подання.

fixedзалишається фіксованим, незважаючи ні на що. Це як фізичне вікно: переміщення навколо вікна змінює ваш погляд, але це не змінює місця, що знаходяться за вікном.

localбуло винайдено, оскільки scrollзначення за замовчуванням діє як фіксований фон. Він прокручується як з основним, так і з локальним видом. Є кілька досить крутих речей, які ви можете з цим зробити.

Пов’язані

фоновий кліп
Колір фону
фонове зображення
фон-походження
фонове положення
фоновий повтор
розмір фону

Більше ресурсів

CSS3 Специфікація
MDN

Підтримка браузера

Значення fixedі scrollпідтримуються скрізь, хоча fixedможуть поводитися дивно на мобільних пристроях. localмає підтримку цього браузера:

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.