Css background fixed: background-attachment - CSS: Cascading Style Sheets

Содержание

background-attachment | CSS справочник

Поддержка браузерами


12.0+	4.0+	1.0+	1.0+	3.5+	1.0+

Описание

CSS свойство background-attachment устанавливает, будет ли фоновое изображение прокручиваться вместе с содержимым элемента.

Допускается указывать несколько значений для ряда фоновых изображений, перечисляя их через запятую. Каждое новое значение применяется к соответствующему фоновому изображению в том порядке, который определён в свойстве background-image.

Значение по умолчанию:	scroll
Применяется:	ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется:	нет
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object. style.backgroundAttachment=»fixed»

Синтаксис

background-attachment: scroll|fixed|local|inherit;

Значения свойства

Значение	Описание
scroll	Фоновое изображение фиксируется по отношению к самому элементу и не прокручивается вместе с его содержимым, т.е. если элемент имеет прокрутку, то изображение остаётся на месте. Если страница имеет прокрутку, то фоновое изображение прокручивается вместе с элементом.
fixed	Фоновое изображение фиксируется по отношению к области просмотра окна браузера, поэтому фон остаётся не подвижным при прокрутке содержимого страницы и/или содержимого элемента. Примечание: фиксированное фоновое изображение располагается относительно верхнего левого угла области просмотра окна браузера, а не элемента.
local	Фоновое изображение фиксируется по отношению к содержимому элемента, т. е. если элемент имеет прокрутку, фоновое изображение прокручивается вместе с содержимым элемента.

Пример


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <style>
    body { height: 1000px; margin: 0; }
    div { width: 300px; height: 200px; margin-bottom: 10px; overflow: auto; }
    #scroll { background: #00ff00 url('cogs.png') no-repeat scroll; }
    #local { background: #00ff00 url('cogs.png') no-repeat local; }
    #fixed { background: #00ff00 url('cogs.png') no-repeat fixed; }
  </style>
</head>
<body>

  <div>scroll<br>scroll<br>scroll<br>scroll<br>
  scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>
  scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>
  scroll<br>scroll<br>scroll<br>scroll<br></div>

  <div>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
  fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
  fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
  fixed<br>fixed<br>fixed<br></div>

  <div>local<br>local<br>local<br>local<br>local<br>
  local<br>local<br>local<br>local<br>local<br>local<br>
  local<br>local<br>local<br>local<br>local<br>local<br>
  local<br>local<br>local<br></div>

</body>
</html>

Попробовать »

css властивість background-attachment

Головна
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

Фонове зображення фіксується по відношенню до самого елементу і не прокручується разом з його вмістом, тобто якщо елемент має прокрутку, то зображення залишається на місці. Якщо сторінка має прокрутку, то фонове зображення прокручується разом з елементом. Без задання.

fixed

Зображення фіксується по відношенню до вікна браузера, тому тло залишається не рухомим при прокручуванні вмісту сторінки і / або вмісту елемента.

local

Фонове зображення фіксується по відношенню до вмісту елементу, тобто якщо елемент має прокрутку, фонове зображення прокручується разом з вмістом елементу.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

unset

Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.

Значення без задання:	scroll
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	object.style.backgroundAttachment=»fixed»

Переглядачі

Стаціонарні переглядачі
Мобільні переглядачі

Переглядач
одне тло	1. 0	4.0	1.0	1.0	3.5
декілька фонів	1.0	9.0	3.6	1.3	10.5
local	1.0	9.0	25	5.0	10.5

Переглядач
одне тло	2. 1	1.0	3.2
декілька фонів	2.1	1.0	3.2
local	2.1	25	3.2

Переглядач

одне тло

2. 1

1.0

3.2

декілька фонів

2.1

1.0

3.2

local

2.1

3.2

Приклади

Приклад 1
Приклад 2
Приклад 3

Демонстрація роботи властивості

Тут наочно показано як працює кожне значення властивості background-attachment

При прокручуванні сторінки, тло не буде прокручуватися разом з вмістом

Додаткові посилання

background-color

background-position

background-size

background-image

background-blend-mode

background-repeat

background-origin

background-clip

background

CSS фоновое вложение | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д. Могу ли я использовать

Поиск ?

Фоновое вложение CSS

— CR

Глобальное использование
79,12% + 3,32% «=» 82,44%

Метод определения способа прикрепления фонового изображения к прокручиваемому элементу. Значения включают прокрутка (по умолчанию), фиксированный и локальный .

Chrome

4–113: поддерживается
114: поддерживается
115–117: поддерживается

Edge

12–113: Поддерживается
114: Поддерживается

Safari

3.1–4 : Частичная поддержка
11% — Supported»> 5 — 12.1: Поддерживается
13 — 13.1: Частичная поддержка
14 — 15.3: Не поддерживается
15.4 — 16.4: Поддерживается
16.5: Поддерживается
16.6 — TP: Поддерживается

Firefox

2 — 24: Частичная поддержка
25 — 112: Поддерживается
114 — 115: Поддерживается

Opera

9–10.1: частичная поддержка
10,5–98: поддерживается
99: поддерживается

IE

03% — Partial support»> 5,5–8: частичная поддержка
9–10: Поддерживается
11: Поддерживается

Chrome для Android

114: поддерживается

Safari на iOS

3.2–4.3: не поддерживается
5–12.5: частичная поддержка
1 3 — 16.4: не поддерживается
16.5: не поддерживается
17 : Не поддерживается

Samsung Internet

4: Не поддерживается
5–20: Частичная поддержка
21: Частичная поддержка

Opera Mini

9 0126 все: не поддерживается

Opera Mobile

00% — Partial support»> 10: частичная поддержка
11–12.1: поддерживается
73: поддерживается

UC Browser для Android

9014 2 13.4: Поддерживается

Браузер Android

2.1–4: Не поддерживается
4.1–4.3: частичная поддержка
4.4–4.4.4: не поддерживается
113: не поддерживается

Firefox для Android

113: поддерживается

Браузер QQ

13.1: Поддерживается

Браузер Baidu

13.18: Поддерживается

Браузер KaiOS

10% — Supported»> 2.5: Поддерживается
3: Поддерживается

Большинство мобильных устройств имеют задержку при обновлении положения фона после прокрутки страницы. страница с фиксированными фонами.

Ресурсы:: MDN Web Docs — background-attachment

Свойство CSS: background-attachment: `fixed` | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск ?

Свойство CSS: background-attachment: `fixed`

Глобальное использование
75,92% + 20,04% «=» 95,96%

IE

6–8: не поддерживается
9–10: поддерживается
11: поддерживается

Edge

17% — Supported»> 12–1 13: поддерживается
114: Поддерживается

Firefox

2 — 112: Поддерживается
113: Поддерживается
114 — 115: Поддерживается

Chrome

4–113: Поддерживается
114: Поддерживается
115–117 : Поддерживается

Safari

3.1 — 13.1: Поддерживается
14 — 16.4: Частичная поддержка
16.5: Частичная поддержка
16.6 — TP: Часть поддержка

Opera

00% — Not supported»> 10: не поддерживается
11.5–98: поддерживается
99: поддерживается

Safari на iOS

3.2–4.3: не поддерживается
5–16 .4: Частичная поддержка
16.5: Частичная поддержка
17: Частичная поддержка

Opera Mini

все: поддержка неизвестна

Браузер Android

2.1–4.4.4: не поддерживается
113: поддерживается 900 15

Opera Mobile

12–12.1: не поддерживается

Css background fixed: background-attachment — CSS: Cascading Style Sheets

background-attachment | CSS справочник

Поддержка браузерами

Описание

Синтаксис

Значения свойства

Пример

css властивість background-attachment

Синтаксис

Переглядачі

Приклади

Додаткові посилання

CSS фоновое вложение | Могу ли я использовать.

Фоновое вложение CSS

Глобальное использование

Chrome

Edge

Safari

Firefox

Opera

IE

Chrome для Android

Safari на iOS

Samsung Internet

Opera Mini

Opera Mobile

UC Browser для Android

Браузер Android

Firefox для Android

Браузер QQ

Браузер Baidu

Браузер KaiOS

Свойство CSS: background-attachment: `fixed` | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Свойство CSS: background-attachment: `fixed`

Глобальное использование

IE

Edge

Firefox

Chrome

Safari

Opera

Safari на iOS

Opera Mini

Браузер Android

Opera Mobile

Добавить комментарий Отменить ответ