HTML: Популярный самоучитель | страница 85
Значения горизонтальной координаты рисунка (свойство background-position-x) могут быть следующими:
• предопределенные значения left, center, right, задающие выравнивание фона по левому краю, по центру или по правому краю элемента соответственно;
• численные значения в одной из единиц измерения длины, поддерживаемой CSS;
• процент от ширины элемента.
Значениями вертикальной координаты рисунка (свойство background-position-y) могут быть:
• предопределенные значения top, center, bottom, задающие выравнивание фона по верхнему краю, по центру или по нижнему краю элемента соответственно;
• численные значения в одной из единиц измерения длины, поддерживаемой CSS;
• процент от высоты элемента.
Пример использования свойств background-position:
BODY {background-position: 10% 100px}
Точно такое же положение фонового рисунка страницы можно получить и следующим способом:
BODY {background-position-x: 10%; background-position-y: 100px}
11.7. Свободное позиционирование
При использовании таблиц стилей появляется еще одна возможность, о которой веб‑дизайнеры до CSS не могли даже мечтать. Установка определенных свойств в таблицах стилей позволяет задавать произвольное положение и размер практически любого элемента страницы. На рис. 11.8 наглядно показано, что представляет собой свободное позиционирование таких элементов, как изображения и текст абзаца.
Рис. 11.8. Свободное позиционирование элементов страницы
В примере 11.4 приведен текст HTML‑документа, в котором реализуется показанное на рисунке свободное позиционирование элементов.
А это свободно позиционированный текст абзаца
Возможность свободного позиционирования предоставляет не только много свободы при оформлении статичных HTML‑документов, но и позволяет создавать разнообразные довольно интересные визуальные эффекты с использованием сценариев. Примеры таких эффектов приведены в гл. 13. Сейчас же мы более подробно рассмотрим свойства CSS, дающие возможность свободно позиционировать элементы страницы. Начнем с использованного в примере 11.4 свойства position, которое позволяет указать браузеру, как выполнить позиционирование элемента страницы.
