И снова здравствуйте, дорогие друзья!
Постоянно замечаю, что когда готовлю для Вас какую-нибудь новую статью — сам учусь чему-то новому, или вспоминаю что-то старое (давно забытое). И это здорово!..
Итак. Вчера мы с Вами рассмотрели основные CSS свойства для работы с фоновыми изображениями. Спешу Вас обрадовать — это не все. Есть еще свойства, которые используются не так часто, но все же знать их нужно.
Сегодня мы постараемся их все обсудить. Начнем...
Свойство background-attachment
Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. В CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.
Может принимать следующие значения:
fixed — Делает фоновое изображение элемента неподвижным.
scroll — Позволяет перемещаться фону вместе с содержимым.
inherit — Наследует значение родителя.
local — Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.
Посмотреть как работает данное свойство можно вот в этом демо.
Следует также отметить, что не все браузеры полностью способны обработать данное свойство:
- В браузере Internet Explorer 6 значение fixed работает только для тегов <body> или <html>.
- Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
- Chrome поддерживает значение local с версии 4.0.
- Safari поддерживает значение local с версии 5.0.
- Firefox не понимает значение local.
Свойство background-clip
Свойство background-clip отвечает за расположение изображения, будет оно накрываться рамкой или нет.
Может принимать значения:
padding-box — Фон отображается внутри границ.
border-box — Фон выводится под границами.
content-box — Фон отображается только внутри контента.
Более понятно станет, когда вы взгляните на картинку:
На картинке красными точками обозначена граница элемента. Как сделать границу в виде точек — можно узнать из статьи «Использование границ (border) при верстке».
Как и предыдущее свойство, не все браузеры понимают свойство background-clip в полном объеме:
- В IE7 фон по умолчанию выводится как при значении padding-box.
- Safari понимает только нестандартное свойство -webkit-background-clip, также с ним работает и Chrome.
- Opera до версии 12.0 не поддерживает значение content-box.
- Firefox до версии 4.0 поддерживает нестандартное свойство -moz-background-clip.
Свойство background-origin
Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.
Как и background-clip, принимает значения:
padding-box — Фон позиционируется относительно края элемента с учетом толщины границы.
border-box — Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.
content-box — Фон позиционируется относительно содержимого элемента.
Результат использования значений свойства background-origin для элемента с рамкой толщиной 20 пикселов показан на рисунке:
Ну и традиционно, совместимость с браузерами:
- Если фон задан один, а значений background-original несколько, то браузеры покажут разное поведение. Firefox и Opera используют первое значение, Chrome и Safari создадут несколько фоновых рисунков.
- Chrome до версии 3.0 и Safari до версии 5.0 поддерживают нестандартное свойство -webkit-background-origin.
- Firefox до версии 4.0 поддерживает нестандартное свойство -moz-background-origin.
Заключение
Ну вот мы с Вами и рассмотрели все CSS свойства для работы с фонами элементов html-страниц. Надеюсь, информация оказалась Вам полезной.
Желаю всем удачи! Увидимся в следующих статьях...
Не забываем подписываться на обновления.
