3.4 Управление фоном элемента - HTML - Каталог статей

3.4 Управление фоном элемента

Урок №2: Введение в языки разметки

В качестве фона элемента можно использовать цвет или изображение. Поэтому обсуждение вопросов управления фоном страницы и ее элементов проводится именно в данном уроке.

Итак, фоновый цвет или рисунок можно назначить любому элементу страницы. Эта задача решается путем добавления стиля CSS нужному элементу. Возникает вопрос: а как назначить фоновый цвет или рисунок всей странице? Правильно - использовать стиль для элемента body.

Ниже приводится перечень стилей CSS для управления фоном:

background-color: цвет; - фоновый цвет элемента
background-image: url(адрес); - фоновое изображение элемента
background-attachment: fixed | scroll; - закрепление фонового изображения
background-repeat: repeat | repeat-x | repeat-y | no-repeat; - способ повторения фонового изображения
background-position: x y; - позиционирование фонового изображения.

Перейдем к примерам.

Пример 1: Использование фонового изображения страницы

Следующий пример демонстрирует использование фонового изображения и цвета страницы:

Листинг №3.4.1: Фоновый рисунок страницы

<body style="background-image: url(bg_01.gif); background-color: #ffffff;
font-style: italic; font-size: 14pt;">

<h1 style="text-align: center;">Фоновый рисунок страницы</h1>
<p>Итак, фоновый цвет или рисунок можно назначить любому элементу страницы. 
Эта задача решается путем добавления стиля CSS нужному элементу. Возникает вопрос: 
а как назначить фоновый цвет или рисунок <b>всей</b> странице? Правильно - использовать 
стиль для элемента <b>body</b>.
</p>

В качестве фонового изображения используется рисунок размерами 25x25 пикселей. Браузер автоматически повторяет рисунок, заполняя им все пространство элемента (страницы).

Пример 2: управление повторением и позицией

По умолчанию, браузер автоматически повторяет рисунок, заполняя им все пространство элемента. Этим процессом можно управлять с помощью свойства стиля background-repeat:

Можно прекратить повторене фонового рисунка, например, присвоив элементу стиль background-repeat: no-repeat:

Листинг №3.4.2: управление повторением
<body style="background-repeat: no-repeat; background-image: url(bg_02.jpg); background-color: #ffffff; font-style: italic; font-size: 14pt;">

Пример 3: позиционирование фонового изображения

Если после отмены повторения фонового рисунка у вас появилось желание расположить его по центру страницы, воспользуйтесь свойством стиля background-position:

Листинг №3.4.3: управление положением
<body style="background-position: 50% 0%; background-repeat: no-repeat; background-image: url(bg_02-1.jpg); background-color: #ffffff; font-style: italic; font-size: 14pt;">

Указать положение фонового рисунка можно, задав его координаты по горизонтали и вертикали, разделив их пробелом. Можно использовать проценты. Так, координаты 0% 0% означают размещение изображения в верхнем левом углу, 50% 50% - по центру страницы и т.д.

Пример 4: привязка фонового изображения

Если в теле документа, снабженного фоновым изображением, разместить настолько большой фрагмент текста, что появится полоса прокрутки, то прокручиваться будет не только текст, но и фон страницы. Прокрутку фонового изображения можно отменить, если задать стилевое правило background-attachment: fixed. Пример:

Листинг №3.4.4: Управление прокруткой

<body style="background-attachment: fixed; background-position: 20 20; 
background-repeat: no-repeat; background-image: url(bg_02-1.jpg); 
background-color: #ffffff; font-style: italic; font-size: 14pt;">

Категория: HTML | Добавил: slava (18.07.2009)

Просмотров: 2490 | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]