Background attachment css: background-attachment — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

Содержание

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: local — CSS-LIVE

Несколько дней назад невероятно талантливый Роман Комаров опубликовал свой эксперимент «Скроллируемые тени» на чистом CSS. Если вы используете Google Reader вы, вероятно, знакомы с этим эффектом:

 

В эксперименте Романа он использует абсолютно позиционированные псевдоэлементы чтобы прикрыть тени (которые сформированы радиальным градиентом в качестве фона). Он воспользовался тем фактом, что когда вы прокручиваете скроллируемый контейнер, его бэкграунд не прокручивается вместе с ним, но, при этом, абсолютно позиционированные элементы внутри контейнера прокручиваются. Таким образом, когда вы проскролливаете содержимое блока, тень становится видно из-под псевдоэлемента. Более того, эти псевдоэлементы представляют собой линейный градиент от белого к прозрачному, что позволяет теням проявляться постепенно.

Когда я увидела демо Романа, мне стало интересно возможно ли добиться того же эффекта без дополнительных контейнеров (включая псевдоэлементы). И, похоже, это идеальный случай для использования background-attachment: local. На самом деле, это был единственный реальный вариант использования этого правила, который я когда либо видела.

«background-attachment… что? Я знаю только scroll и fixed!»

scroll и fixed были единственными значениями для background-attachment во времена CSS 2.1. scroll — это дефолтное значение, которое позиционирует фоновое изображение относительно элемента, которому оно назначено, в то время как fixed позиционирует его относительно области просмотра (viewport), в результате чего бекграунд остается на месте, в то время когда страница прокручивается. Как результат этих определений, в случае если скроллируемой была только часть страницы (например, <div> с overflow: auto), его бекграунд не прокручивался когда прокручивался сам контейнер.

В модуле CSS, посвященному границам и фоновым изображениям Backgrounds & Borders Level 3 было добавлено новое значение, чтобы снять это ограничение: local. Когда применяется background-attachment: local фоновое изображение позиционируется относительно содержимого элемента. В результате этого оно прокручивается когда прокручивается элемент. Это не новая фича, она была нам доступна со времен первых черновиков Backgrounds & Borders 3 в 2005 году (конечно, реализация заняла некоторое время, так что можно считать, что с 2009).

Если вам все еще не понятно как это работает, поиграйте немного с этим кодом, который демонстрирует работу всех трех значений (естественно ваш браузер должен поддерживать все три):

«Хорошо, я понял. Вернитесь к скроллируемым теням пожалуйста?»

Основная идея заключалась в том, чтобы превратить эти абсолютно позиционированные псевдоэлемнты в фоновые слои, к которым применено правило background-attachment: local. Я попробовала это, это сработало и помогло довольно сильно сократить код. Вот как выглядит CSS:

Недостаток этого подхода в том, что мы немного понижаем кроссбраузерность. Оригинальный эксперимент Романа мог работать даже в IE8, если заменить градиенты картинками (градиенты не влияют на функциональность). Когда вы полагаетесь на background-attachment: local, вы сужаете поддержку браузерами до IE9+, Safari 5+, Chrome

и Opera. Firefox оказался самым явным прогульщиком из этого списка, вы можете проголосовать за баг #483446, если вы заинтересованны в том, чтобы они реализовали это.

Тем не менее, поддержка браузерами не очень важна, т.к. эффект очень изящно деградирует. В браузерах, не поддерживающих этот метод, вы просто не увидите теней 😉

Перевод статьи Pure CSS scrolling shadows with background-attachment: local автор Lea Verou

P.S. Это тоже может быть интересно:

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

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

Поиск

?

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

— CR

  • global»>
    Глобальное использование
    79,44% + 3,75% «=» 83,19%

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

прокрутка (по умолчанию), фиксированный и локальный .

Chrome
  1. 4 — 111: Supported
  2. 112: Supported
  3. 113 — 115: Supported
Edge
  1. 12 — 110: Supported
  2. 111: Supported
Safari
  1. 3.1 — 4 : Частичная поддержка
  2. 5 — 12.1: Поддерживается
  3. 13 — 13.1: Частичная поддержка
  4. 50% — Not supported»> 14 — 15.3: Не поддерживается
  5. 15.4 — 16.3: Поддерживается
  6. 16.4: Supported
  7. 16.5 — TP: Supported
Firefox
  1. 2 — 24: Partial support
  2. 25 — 110: Supported
  3. 111: Supported
  4. 112 — 113: Supported
Opera
  1. 9 — 10.1: Частичная поддержка
  2. 10,5 — 94: Поддерживается
  3. 95: Поддерживается
IE
  1. 5,5 — 8: частичная поддержка
  2. 07% — Supported»> 9 — 10: поддержал
  3. 11: Поддержка
  5. 900: 100015
  6. 11: поддержка
  11. .0013 Chrome для Android
    1. 111: Поддерживается
    Safari на iOS
    1. 3,2 — 4,3: Не поддерживается
    2. 5 — 12,5: частичная поддержка
    3. 13 -16.3: Независимо от
        4. 011: 40011: 4011: 4011: 4011: 4011: 4011: 40111,
          ,
        • 13 -16. 3: Независимо
            : 4011: 4011: 4011: 4001: 4.4101: 4.411: 4011: 4.4, не поддерживают : Не поддерживается
      Samsung Internet
      1. 4: Не поддерживается
      2. 5 — 19.0: Частичная поддержка
      3. 20: Частичная поддержка
      Opera Mini
      5
        9 Не поддерживается все:
      1. 034
        Opera Mobile
        1. 10: Частичная поддержка
        2. 11 — 12,1: Поддерживается
        3. 73: Поддерживается
        UC Browser для Android
        1. 13.4: поддержка
        и поддержка
        и поддержка
        1. 13.4: поддержка
          2. 40013.
        2. 4.1–4.3: Частичная поддержка
        3. 4.4–4.4.4: Не поддерживается
        4. 111: Не поддерживается
        Firefox для Android
        1. 110: Поддерживается 9 Qr3

          2. Browser0014
          1. 13.1: поддержан
          Baidu Browser
          1. 13.18: Поддерживается
          Kaios Browser
          1. 2,5: поддержание
          2. 3: Поддержка
          3. 2,5: Поддержка
          4. 3: Поддержка
          5. 2,5: Поддерживаемые
          6. 3: Поддержка
          7. 07% — Supported»>. страница с фиксированными фонами.

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

            Браузерная совместимость с CSS background-attachment

            Последнее обновление: 2023-03-20

            Примечание:

            Фоновое вложение CSS показывает оценку совместимости браузера 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

            founal_attachment.html

            Источник: Founal_attachment.html

            Совместимость браузера

            • CSS-attachment на IE IE полностью не поддерживается на 9-11, и Partivally. поддерживается в версиях ниже 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 и не поддерживается в Safari 3.2-16.4 в версиях 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

            Средний

            Оценка совместимости браузера

            Бружье0003

            Поддержка браузера для краевых версий

            12-111

            Полностью

            —

            Частично

            —

            Нет поддержки

            Тест на Edge

            . 2-24

            Частично

            —

            Нет поддержки

            Тест на Firefox

            Поддержка браузером для версий Chrome

            4-114

            Полная

            3

            — Частично

            0003

            —

            Нет поддержки

            Тест на Chrome

            Поддержка браузера для версий Safari

            5.1-16,4

            Полностью

            3,2-13

            ПАРТИВАЛЬНО

            14.11.1

            NO.

            Поддержка браузера для версий Opera

            10.5-95

            Полная

            9.5-10

            Частично

            —

            Нет поддержки0003

            —

            Полностью

            5-12.2

            Частично

            3,2-16,4

            Нет поддержки

            Тест на Safari на IOS

            Бруузер.

            частично

            2,1-111

            NO Поддержка

            Тест на браузере Android

            Поддержка браузера для Opera Mobile Versions

            11,5-73

            Полностью

            10-10

            Частично

            0003

            64-64

            NO поддержка

            Тест на Opera Mobile

            Брубзер для Android

            Поддержка браузера Для интернет-версий Samsung

            —

            Полностью

            5-20

            Частично

            4-4

            Нет поддержки

            Тест в Интернете Samsung0003

            Используйте возможности движка на основе Chromium для создания адаптивных веб-сайтов и веб-приложений.

            Попробуйте бесплатно

            Отлаживайте веб-страницы на ходу с расширением LT Debug Chrome.

            Добавить в Chrome

            Протестируйте свой веб-сайт в более чем 3000 браузерах

            Протестируйте свой веб-сайт в более чем 3000 реальных браузерах и операционных системах для мобильных и настольных компьютеров с помощью облака LambdaTest. Выполните тест на совместимость с браузером для CSS background-attachment и многих других веб-технологий, которые являются частью вашего веб-сайта или веб-приложения.

            Test Now

            Last Modified date

            2023-03-20

            Browser Support for CSS background-attachment

            • Chrome
            • Safari
            • Firefox
            • Internet Explorer
            • Opera
            • Edge

            Support for CSS background-attachment в Google Chrome

            Поддержка CSS background-attachment в Microsoft Edge

            Поддержка CSS background-attachment в Mozilla Firefox

            Поддержка CSS background-attachment в Internet Explorer

            Поддержка прикрепления фона CSS в Opera

            Поддержка прикрепления фона CSS в Safari

            Ссылки


            Данные получены из

            • — Консорциума World Wide Web (W3C) (https://www.

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

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