Background fixed: CSS background-attachment property

Разное 

Содержание

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

Приклади

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

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

Тут наочно показано як працює кожне значення властивості background-attachment
При прокручуванні сторінки, тло не буде прокручуватися разом з вмістом
 
Додаткові посилання
background-color
background-position
background-size
background-image
background-blend-mode
background-repeat
background-origin
background-clip
background
 Совместимость с браузером CSS background-attachment 
 
 Приложение и браузер нового поколения 

 Облако тестирования  
 Нам доверяют более 1 миллиона специалистов по контролю качества и разработчиков для ускорения циклов выпуска 
 
 Последнее обновление: 20 марта 2023 г.  
 
 Примечание. 
 
  CSS background-attachment  показывает оценку совместимости браузера  72  . Это общая оценка из 100, отражающая поддержку браузером веб-технологии. Чем выше этот показатель, тем выше совместимость браузера. Оценка совместимости браузера не является 100% отражением для каждого браузера и поддержки веб-технологий. Тем не менее, он дает вам оценку того, насколько вы должны полагаться на конкретную веб-технологию с точки зрения совместимости браузера. 
 
 Обзор 
  
 background-attachment определяет, как фоновое изображение будет отображаться при прокрутке содержимого. Значения включают прокрутку, фиксированный и локальный.
 
  
 Формальное определение 
 
 Унаследовано 
 
 нет 
 
 Применяется ко всем элементам 
 
. Это также относится к ::first-letter и ::first-line. 
 
 Исходное значение 
 
 прокрутка 
 
 Тип анимации 
 
 дискретный 
 
 Расчетное значение 
 
 как указано 
 
 Спецификации 
 
 Модуль фона и границ CSS, уровень 4 # the-background-attachment 
 
 Синтаксис 
  
 /* Значения ключевых слов */
 background-attachment: прокрутка;
 background-attachment: исправлено;
 background-attachment: местный;
 /* Глобальные значения */
 background-attachment: наследовать;
 background-attachment: начальный;
 background-attachment: вернуться;
 фоновое вложение: не установлено;
 
 Фрагменты кода 
 04_attachment. htm
 Источник:04_attachment.htm
 background_attachment.html
 Источник: background_attachment.html
 Браузерная совместимость 
     900 72 CSS background-attachment в IE полностью поддерживается в 9-11, частично поддерживается в 5.5-8 и не поддерживается в версиях ниже 5.5 IE.
  •  Фоновое вложение CSS в Edge полностью поддерживается в версиях 12-111, частично поддерживается ни в одной из версий и не поддерживается в версиях Edge ниже 12.
  •  Фоновое вложение CSS в Firefox полностью поддерживается в версиях 25-113, частично поддерживается в версиях 2-24 и не поддерживается в версиях Firefox ниже 2.
  •  Фоновое вложение CSS в Chrome полностью поддерживается в 4–114, частично поддерживается ни в одной из версий и не поддерживается в версиях Chrome ниже 4.
  •  Фоновое вложение CSS в Safari полностью поддерживается в версиях 5.1–16.4, частично поддерживается в версиях 3.2–13 и не поддерживается в версиях Safari 14. 1–16.1.
  •  Фоновое вложение CSS в Opera полностью поддерживается в версиях 10.5–95, частично поддерживается в версиях 9.5–10 и не поддерживается в версиях Opera ниже 9.5.
  •  Фоновое вложение CSS в  Safari на iOS  полностью поддерживается ни в одной из версий, частично поддерживается в версиях 5–12.2 и не поддерживается в версиях 3.2–16.4 Safari на iOS.
  •  Фоновое вложение CSS в браузере Android   полностью поддерживается ни в одной из версий, частично поддерживается в версиях 4.2–4.1 и не поддерживается в версиях браузера Android 2.1–111.
  •  Фоновое вложение CSS в  Opera Mobile  полностью поддерживается в версиях 11.5–73, частично поддерживается в версиях 10–10 и не поддерживается в версиях Opera Mobile 64–64.
  •  Фоновое вложение CSS в  Chrome для Android  полностью поддерживается в версиях 97-111, частично поддерживается ни в одной из версий и не поддерживается в версиях Chrome для Android ниже 97.
  •  Фоновое вложение CSS в  Firefox для Android  полностью поддерживается в версиях 95-110, частично поддерживается ни в одной из версий и не поддерживается в версиях ниже 95 Firefox для версий Android.
  •  Фоновое вложение CSS на  Samsung Internet  полностью поддерживается ни в одной из версий, частично поддерживается в 5-20 и не поддерживается в 4-4 версиях Samsung Internet.
 72
 Средний
 Оценка совместимости браузера 
 Поддержка браузером версий IE
 9-11
 Полная
 5.5 -8
 Частично
 —
 Нет поддержки
 Тест на IE
 Поддержка браузера для версий Edge
 12-111
 Полная
 —
 Частично
 —
 Нет поддержки
 Проверка на Edge
 Поддержка браузером версий Firefox
 25-113
 Полная
 2-24
 Частично
 —
 Нет поддержки
 Проверка на Firefox
 Поддержка браузером версий Chrome
 4-114
 Полная
 9 0005 —
 Частично
 —
 Нет поддержки
 Тест на Chrome
 Поддержка браузера для версий Safari
 5. 1-16.4
 Полностью
 3.2-13
 Частично
 14.1-16.1
 Нет поддержки
 Тест в Safari
 Поддержка браузером версий Opera
 10.5-95
 Полная
 9.5-10
 Частично
 —
 Нет поддержки
 Тест в Opera
 Поддержка браузера для Safari в iOS версии
 —
 Полностью
 5-12.2
 Частично
 3.2-16.4
 Нет поддержки
 Тест в Safari на iOS
 900 05 Поддержка браузера для версий браузера Android
 —
 Полностью
 4.2-4.1
 Частично
 2.1-111
 Нет поддержки
 Тестирование в браузере Android
 Поддержка браузером мобильных версий Opera
 11.5-73
 Полностью
 10-10
 Частично
 64-64
 Нет поддержки
 Тестирование в Opera Mobile
 Поддержка браузера Chrome для версий Android
 97-111
 Полностью
 —
 Частично
 —
 Нет поддержки
 Тест на Chrome для Android
 Поддержка браузера Для интернет-версий Samsung
 —
 Полностью
 5-20
 Частично
 4-4
 Нет поддержки
 900 05 Тест на Samsung Internet
 Присоединяйтесь к бесплатной онлайн-конференции, чтобы расшифровать будущее тестирования!
 Зарегистрируйтесь сейчас
 Отлаживайте веб-страницы на ходу с расширением LT Debug Chrome.
 Добавить в Chrome
 Протестируйте свой веб-сайт в более чем 3000 браузерах 
 Протестируйте свой веб-сайт в более чем 3000 реальных браузерах и операционных системах для мобильных и настольных компьютеров с помощью облака LambdaTest. Выполните тест на совместимость с браузером для  CSS background-attachment  и многих других веб-технологий, которые являются частью вашего веб-сайта или веб-приложения.
 Протестировать сейчас
 Дата последнего изменения
 2023-03-20
 Поддержка браузером фонового вложения CSS 
  •  Chrome
  •  Safari
  •  Firefox 9 0073
  •  Internet Explorer
  •  Opera
  •  Edge
 Поддержка CSS background-attachment в Google Chrome 
 Поддержка CSS background-attachment в Microsoft Edge 
 Поддержка CSS background-attachment в Mozilla Firefox 
 Поддержка CSS background-attachment в Internet Explorer 
 Поддержка прикрепления фона CSS в Opera 
 Поддержка прикрепления фона CSS в Safari 
 Ссылки 
 
 w3 . org/TR/)
  •  — CanIuse (https://caniuse.com/)
  •  — Веб-документы Mozzila MDN (https://developer.mozilla.org/en-US/)
  •  — Web.Dev ( https://web.dev/)
  •  — Статус платформы Chrome (https://chromestatus.com/features)
  •  — Статус функции WebKit (https://webkit.org/status/)
    •  Отладка веб-страниц на ходу с расширением LT Debug Chrome.
     Добавить в Chrome
     Используйте возможности движка на основе Chromium для создания адаптивных веб-сайтов и веб-приложений.
     Попробуйте бесплатно
     Была ли эта статья полезной? 
     X
     Мы используем файлы cookie, чтобы предоставить вам лучший опыт. Файлы cookie помогают предоставить вам более персонализированный опыт и релевантную рекламу, а нам — веб-аналитику. Узнайте больше в нашей Политике использования файлов cookie, Конфиденциальности и Условиях обслуживания
     Разрешить CookieCancel
     Как сделать фиксированный фон? — Общие — Форум 
     Jacobbrownacro
 (Джейкоб Браун)  1
     У меня проблема с фоном. Я хочу, чтобы это было исправлено, поэтому без прокрутки. Он делает это в дизайнере, но когда я публикую и просматриваю свой сайт с ноутбука или телефона, фон прокручивается. Почему это? Я включил ссылку на общий доступ.
     https://preview.webflow.com/preview/jacob-and-debbie-acro?preview=11d9b01f5d36d62d3a228af8175edbf3
     Веб-сайт:
     jacobanddebbieacro.com
     Джейкоб и Дебби Акробатика 
     Джейкоб и Дебби Акробатика — это страница, на которой вы можете увидеть наши любимые акробатические движения. Здесь вы можете найти сборники различных видов акро: стиральные машины, танцевальные подъемы, стоя, поп, хлысты, рук в руки и т. д. Видео уроки акро на Патреоне. …
     Уроки Acro Patreon Джейкоба и Дебби делают это хуже всего в мобильном портретном режиме.
     Вот мой сайт Только для чтения:  ССЫЛКА  
     (как поделиться ссылкой на свой сайт только для чтения)
     Siton_Systems
 (Эзра Ситон)  2
     Вы устанавливаете стили на  прокрутки  изменить на  фиксированный 
     .body-class {
    /* изменить это */
    background-attachment: прокрутка;
}
 
     изображение 245×518 12,4 КБ
     w3schools.com
     Онлайн-редактор HTML W3Schools 
     Онлайн-редактор кода W3Schools позволяет редактировать код и просматривать результат в браузере
     https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios
     Jacobbrownacro
 (Джейкоб Браун)  3
     В статье говорится, что
     Фиксированные фоны требуют огромных затрат на перерисовку и уменьшают производительность прокрутки, поэтому, как я полагаю, они были отключены
     Это правда? Фиксированные фоны — проблема для мобильных браузеров? Это означает, что я вообще не могу использовать фиксированный фон, потому что мне нужно, чтобы мой сайт работал с мобильным портретом.
    No related posts.
    Автор записи

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *