css властивість background-attachment
CSS властивість background-attachment визначає, чи буде фонове зображення прокручуватися разом зі вмістом елемента.
Мабуть кожен бачив “супер крутий” сайт де тло при прокручуванні залишається на місці і не рухається разом з вмістом, саме таку поведінку дозволяє задати ця властивість, дивись 3-й приклад. Якщо коротко, то background-attachment може зафіксувати тло, щоб воно залишатися нерухомим, або зробити так, щоб тло рухалося разом з документом.
Існує різниця між головним вікном браузера та локальним вікном (ви можете побачити це в демо нижче).
scroll є значенням без задання. Тло у цьому випадку прокручується разом з головним вікном браузера, але залишається фіксованим всередині локлаьного перегляду
local робить так, щоб тло прокручувалося тільки всередині свого локального вікна, він фіксується відносно вмісту елементу, й при прокручуванні цілої сторінки не буде рухатися.
fixed же фіксує тло, незалежно від типу вікна в якому він розташований.
Дозволяється вказувати декілька значень для ряду фонових зображень, перераховуючи їх через кому. Кожне нове значення застосовується до для кожного з множинних фонових малюнків в тому порядку, який визначений у властивості background-image. Наочно можеш подивитися в другому прикладі
Синтаксис
background-attachment: scroll|fixed|local|initial|inherit|unset;Властивість background-attachment може отримувати 6 значень:
-
scroll -
Фонове зображення фіксується по відношенню до самого елементу і не прокручується разом з його вмістом, тобто якщо елемент має прокрутку, то зображення залишається на місці. Якщо сторінка має прокрутку, то фонове зображення прокручується разом з елементом. Без задання.
автор: NagarD -
fixed -
Зображення фіксується по відношенню до вікна браузера, тому тло залишається не рухомим при прокручуванні вмісту сторінки і / або вмісту елемента.
автор: NagarD -
local -
Фонове зображення фіксується по відношенню до вмісту елементу, тобто якщо елемент має прокрутку, фонове зображення прокручується разом з вмістом елементу.
автор: NagarD -
initial -
Встановлює властивість у значення без задання
автор: NagarD -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: NagarD -
unset -
Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.
автор: NagarD
| Значення без задання: | scroll |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.backgroundAttachment="fixed" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 | |
| одне тло | 1.0 | 1.0 | 1.0 | 3.5 | 4.0 | |
| декілька фонів | 1.0 | 3.6 | 1.3 | 10.5 | 9.0 | |
| local | 1.0 | 25 | 5.0 | 10.5 | 9.0 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3.2 | |
| одне тло | 2.1 | 1.0 | 3.2 | |
| декілька фонів | 2.1 | 1.0 | 3.2 | |
| local | 2.1 | 25 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Демонстрація роботи властивості
Тут наочно показано як працює кожне значення властивості background-attachment
При прокручуванні сторінки, тло не буде прокручуватися разом з вмістом
Коментарі
Коментарів ще немає — будьте першим!