Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

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

Приклади

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

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

Тут наочно показано як працює кожне значення властивості background-attachment
При прокручуванні сторінки, тло не буде прокручуватися разом з вмістом
 
Додаткові посилання
background-color
background-position
background-size
background-image
background-blend-mode
background-repeat
background-origin
background-clip
background
 HTML DOM Style backgroundAttachment Property 
  
 ❮ Предыдущий
❮ Справочник по объектам стиля
Далее ❯ 
  
 Пример 
 
 Установить фоновое изображение, которое будет фиксированным (не будет прокручиваться): 
 
 document. body.style.backgroundAttachment = «fixed»; 
 
 Попробуйте сами » 
 
 Другие примеры «Попробуйте сами» ниже. 
 
 
 Определение и использование 
 
 Свойство backgroundAttachment задает или возвращает, должно ли фоновое изображение прокручиваться вместе с содержимым или быть фиксированным. 
 
 См. также: 
 
 Стили HTML: Свойство фона 
 
 Учебник CSS: Фоны CSS 
 
 Справочник по CSS: Свойство CSS background-attachment 
 
 
 Синтаксис 
 
 Возвращает свойство объекта backgroundAttachment: 
 3 . backgroundAttachment 
 
 Установить свойство backgroundAttachment: 
 
  object  .style.backgroundAttachment = «scroll|fixed|local|initial|inherit» 
 
 
 Значения свойств 
  
 
  Значение 
      Описание 
   
 
  свиток 
      Фон прокручивается вместе с элементом. Это по умолчанию 
   
 
  фиксированный 
      Фон фиксирован относительно области просмотра 
   
 
  местный 
      Фон прокручивается вместе с содержимым элемента 
   
 
  начальный 
      Устанавливает для этого свойства значение по умолчанию.


  Читать о  начальный  		
     
 
  унаследовать 
      Наследует это свойство от родительского элемента. Читать о  унаследовать  
     
 
 
  
 Технические детали 
  
 
  Значение по умолчанию: 
   свиток 
 
 
  Возвращаемое значение: 
    Строка, представляющая, как фоновое изображение прикрепляется к объекту в документе 
 
 
  Версия CSS 
    CSS1 
 
 
 
 
  
 Поддержка браузера 
  
  backgroundAttachment  — это функция CSS1 (1996). 
 
 Полностью поддерживается во всех браузерах: 
 
 
 
     
     
     
     
     
   
 
  Хром 
      Край 
      Фаерфокс 
      Сафари 
      Опера 
      ИЭ 
   
 
  Да 
      Да 
      Да 
      Да 
      Да 
      Да 
 
 
 
  
 Дополнительные примеры 
 
 Пример 
 
 Выбор между прокруткой и локальным элементом DIV: 
 
 document. getElementById(«myDIV»).style.backgroundAttachment = «local»; 
 
 Попробуйте сами » 
 
 Пример 
 
 Переключение между прокруткой и фиксированным: 
 
 let x = document.body.style.backgroundAttachment; 
 document.body.style.backgroundAttachment = (x == «прокрутка»)? «исправлено»: «прокрутка»; 
 
 Попробуйте сами » 
 
 Пример 
  
 Вернуть значение свойства background-attachment: 
 
 let back = document.body.style.backgroundAttachment; 
 
 Попробуйте сами » 
 
 ❮ Предыдущая
❮ Справочник по объектам стиля
Следующий ❯ 
 

  
 ВЫБОР ЦВЕТА 
 

 
 
 
 
  
 Лучшие учебники 
 
Учебное пособие по HTML 
 Учебное пособие по CSS 
 Учебное пособие по JavaScript 
 Учебное пособие 
 Учебное пособие по SQL 
 Учебное пособие по Python 
 Учебное пособие по W3.CSS 
 Учебник по Bootstrap 
 Учебник по PHP 
 Учебник по Java 
 Учебник по C++ 
 Учебник по jQuery 
 
 
  
 Лучшие ссылки 
 
HTML Reference 
 CSS Reference 
 JavaScript Reference 
 SQL Reference 
 Python Reference 
 W3. CSS Reference 
 Bootstrap Reference 
 PHP Reference 
 HTML Colors 
 Java Reference 
 Angular Reference 
 jQuery Reference 
 
 
 9 Top0 Examples
Примеры HTML 
 Примеры CSS 
 Примеры JavaScript 
 How To Примеры 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery 
 
 
 
 FORUM |
    О 
 

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности. 
 
 Copyright 1999-2023 Refsnes Data. Все права защищены. 
 W3Schools работает на основе W3.CSS. 
  
 Совместимость с браузером фонового вложения CSS 
 
 Последнее обновление: 30. 06.2022 
 
 Примечание: 
 
  Фоновое вложение CSS  показывает оценку совместимости браузера  67  . Это общая оценка из 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 
       
    •  CSS-ATTACHMENT на  IE 
         
      • . и не поддерживается в версиях ниже 5.5 IE. 
        •  
      •  Фоновое вложение CSS в  Edge  полностью поддерживается в версиях 12-103, частично поддерживается ни в одной из версий и не поддерживается в версиях ниже 12 Edge. 
        •  
      •  Фоновое вложение CSS в  Firefox  полностью поддерживается в версиях 25-104, частично поддерживается в версиях 2-24 и не поддерживается в версиях Firefox ниже 2. 
        •  
      •  Фоновое вложение CSS в  Chrome  полностью поддерживается в 4-106, частично поддерживается ни в одной из версий и не поддерживается в версиях Chrome ниже 4. 
        •  
      •  Фоновое вложение CSS в  Safari  полностью поддерживается в версиях 5.1–12, частично поддерживается в версиях 3. 2–13 и не поддерживается в версиях Safari 14.1–16. 
        •  
      •  Фоновое вложение CSS в  Opera  полностью поддерживается в версиях 10.6–87, частично поддерживается в версиях 9.5–10 и не поддерживается в версиях Opera ниже 9.5. 
        •  
      •  Фоновое вложение CSS в  Safari на iOS  полностью поддерживается ни в одной из версий, частично поддерживается в 5-12.2 и не поддерживается в Safari 3.2-16 в версиях iOS. 
        •  
      •  Фоновое вложение CSS в браузере Android   полностью поддерживается ни в одной из версий, частично поддерживается в версиях 4.2–4.1 и не поддерживается в версиях браузера Android 2.3–103. 
        •  
      •  Фоновое вложение CSS в  Opera Mobile  полностью поддерживается в версиях 11.5–12, частично поддерживается в версиях 10–10 и не поддерживается в версиях Opera Mobile 64–64. 
        •  
      •  Фоновое вложение CSS в  Chrome для Android  полностью поддерживается в версиях 97-103, частично поддерживается ни в одной из версий и не поддерживается в версиях Chrome для Android ниже 97.  
        •  
      •  Фоновое вложение CSS в  Firefox для Android  полностью поддерживается в 95-101, частично поддерживается ни в одной из версий и не поддерживается в ниже 95 Firefox для версий Android. 
        •  
      •  Фоновое вложение CSS в  Samsung Internet  полностью поддерживается ни в одной из версий, частично поддерживается в 5-17 и не поддерживается в 4-4 версиях Samsung Internet. 
        •  
       
       67 
       
       Средний 
       
       Оценка совместимости браузера 
       
       Поддержка браузера для версий IE 
       
       9-11 
       
       Полностью 
       
       5,5-8 
       
       Частично 
       
      —
       
       NOP 70003 
      .0003 
       Поддержка браузера для краев версий 
       
       12-103 
       
       Полностью 
       
       — 
       
       Частично 
       
       — 
       
       НЕТ поддержка 
       
       Тест на Edge 
       
      . 2-24 
       
       Частично 
       
       — 
       
       Нет поддержки 
       
       Тест на Firefox 
       
       Поддержка браузера для версий Chrome 
       
       4-106 
       
       Полная 
      3 
       — Частично 
       
      0003 
      —
       
       Нет поддержки 
       
       Тест на Chrome 
       
       Поддержка браузера для версий Safari 
       
       5. 1-12 
       
       Полностью 
       
       3,2-13 
       
      . 
       Поддержка браузера для версий Opera 
       
       10.6-87 
       
       Полная 
       
       9.5-10 
       
       Частично 
       
       — 
       
       Нет поддержки0003 
      —
       
       Полностью 
       
       5-12.2 
       
       Частично 
       
       3,2-16 
       
       НЕТ поддержка 
       
       Тест на сафари на IOS 
       
       Бруузер. 
       частично 
       
       2,3-103 
       
       Нет поддержки 
       
       Тест на браузере Android 
       
       Поддержка браузера для Opera Mobile Versions 
       
       11,5-12 
       
       Полностью 
       
       10-10 
       
       Частично 
      0003 
       64-64 
       
       Нет поддержки 
       
       Тест на Opera Mobile 
       
       Поддержка браузера для Chrome для версий Android 
       
       97-103 
       
       Полностью 
       
       — 
       
       Частично 
       
       — 
       
       
       
      . для Android 
       
       Поддержка браузера Для интернет-версий Samsung 
       
       — 
       
       Полностью 
       
       5-17 
       
       Частично 
       
       4-4 
       
       Нет поддержки 
       
       Тест в Интернете Samsung0003 
       Используйте возможности движка на основе Chromium для создания адаптивных веб-сайтов и веб-приложений.  
       
       Попробуйте бесплатно 
       
       Отлаживайте веб-страницы на ходу с расширением LT Debug Chrome. 
       
       Добавить в Chrome 
       
       Протестируйте свой веб-сайт в более чем 3000 браузерах 
       
       Протестируйте свой веб-сайт в более чем 3000 реальных браузерах и операционных системах для мобильных и настольных компьютеров с помощью облака LambdaTest. Выполните тест на совместимость с браузером для  CSS background-attachment  и многих других веб-технологий, которые являются частью вашего веб-сайта или веб-приложения. 
        
       Test Now 
        
       Last Modified date 
        
       2022-06-30 
        
       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 
       
       Ссылки 
        
       
       .
Оставить комментарий

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

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

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.

Карта сайта