Свойство background-attachment - это отличный инструмент для управления поведением фоновых изображений. Оно позволяет вам решить, будет ли фон «прилипать» к элементу или спокойно скроллиться вместе с остальным контентом страницы. Здесь есть важный нюанс: вы можете задавать несколько значений сразу для цепочки фоновых изображений, разделяя их запятыми. Каждое новое значение четко привязывается к соответствующему слою фона в том самом порядке, который вы определили ранее через свойство background-image. | Значение по умолчанию: | scroll | | Наследуется: | нет | | Версия: | CSS1 | | Синтаксис JavaScript: | object.style.backgroundAttachment="fixed" | Давайте разберем ключевые значения, чтобы вы точно понимали, какое поведение получит ваш дизайн: | Значение | Описание | | 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 id="scroll"scrollbrscrollbrscrollbrscrollbr scrollbrscrollbrscrollbrscrollbrscrollbrscrollbr scrollbrscrollbrscrollbrscrollbrscrollbrscrollbr scrollbrscrollbrscrollbrscrollbr/div div id="fixed"fixedbrfixedbrfixedbrfixedbrfixedbr fixedbrfixedbrfixedbrfixedbrfixedbrfixedbr fixedbrfixedbrfixedbrfixedbrfixedbrfixedbr fixedbrfixedbrfixedbrfixedbr/div div id="local"localbrlocalbrlocalbrlocalbrlocalbr localbrlocalbrlocalbrlocalbrlocalbrlocalbr localbrlocalbrlocalbrlocalbrlocalbrlocalbr localbrlocalbrlocalbrlocalbr/div /body /html
|