background-attachment
Если указано background-image , CSS свойство background-attachment определяет, является ли позиция этого изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.
| Начальное значение | scroll |
|---|---|
| Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |
Синтаксис
Значение свойства background-attachment задаётся одним из ключевых значений из списка ниже.
Значения
Фон фиксируется относительно области просмотра. Даже если элемент имеет механизм прокрутки, фон не перемещается вместе с элементом. (Это значение несовместимо с background-clip: text .)
Фон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.
Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплён к границе элемента.)
Как зафиксировать фон на HTML.
<BODY BGCOLOR=silver text=black leftmargin=»0″ topmargin=»0″ marginheight=0 marginwidth=0 rightmargin=0 bottommargin=0 background=»pic/fon1.jpg» link=»#000000″ vlink=»#000000″ alink=»#000000″> <CENTER>
P.S. А еще лучше так:
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.13.43308
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Background-attachment: фиксация фона
По умолчанию, когда вы скроллите веб-страницу с фоном, фон прокручивается вместе с другими элементами. Иногда это уместно, а иногда хочется, чтобы изображение, заданное через background-image , всегда оставалось на виду. Для управления этим состоянием существует свойство background-attachment .
Значения background-attachment
Свойство может принимать три значения для настройки поведения фона:
- scroll (значение по умолчанию) — фоновое изображение перемещается вместе с другими элементами при скролле веб-страницы.
- fixed — значение фиксирует фоновое изображение, делая его нечувствительным к скроллу. При прокручивании страницы фон на заднем плане останется неподвижным.
- local — данное значение было добавлено из-за того, что в случае с локальным скроллом фон со значением scroll ведет себя как fixed. При значении local фон прокручивается вместе с содержимым элемента, и не прокручивается, если содержимое не скроллится (но прокручивается вместе с самим элементом).
Для лучшего понимания работы свойства взгляните на примеры ниже. Чтобы вы могли их сравнить, ваш браузер должен поддерживать все три значения background-attachment (надеемся, что при изучении CSS вы пользуетесь современным десктопным браузером!).
Свойство background-attachment
Свойство background-attachment задает каким образом прокручивать фоновую картинку элемента: вместе с текстом или текст будет скользить по картинке.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| fixed | Картинка фона будет неподвижной, а текст будет скользить по ней. |
| scroll | Картинка фона будет прокручиваться вместе с текстом. |
| local | Фон фиксируется с учетом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остается на месте. |
Значение по умолчанию: scroll .
Пример . Значение scroll
Сейчас свойство background-attachment установлено в значение scroll . Прокрутите элемент по вертикали — вы увидите, как текст прокручивается вместе с фоном:
Пример . Значение fixed
А теперь свойство background-attachment установлено в значение fixed . Прокрутите элемент по вертикали — вы увидите, как текст скользит по фону:
