Фоновый рисунок на Web-странице
Цель: изучить задания фонового рисунка на Web-странице.
Содержание:
Учебная задача 1.
Учебная задача 2.
Учебная задача 3.
Практика.
Учебная задача 1. Изучи атрибуты, которые управляют фоновой заставкой.
В связи с особенностями веб-страниц, фоновые рисунки приобретают значительную роль при верстке документов сайта. При этом они активно участвуют в самых разных делах, например, автоматизируют процесс присоединения рисунков к тексту, создают градиентные переходы и, конечно, добавляют фон под содержимым.
Установка фонового рисунка на веб-страницу традиционно происходит через параметр background тега <BODY>. Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому обратимся к стилям и посмотрим, что же можно делать с помощью CSS.
Атрибуты, которые управляют фоновой заставкой
В CSS имеется пять атрибутов, которые управляют фоновой картинкой: ее добавлением, положением и повторением, их и будем использовать в дальнейшем.
background-image – устанавливает фоновый рисунок
background-color – определяет цвет фона
background-repeat – определяет, должен ли фоновый рисунок повторяться (no-repeat означает без повторений, repeat – стандартное значение, repeat-x – повторяет рисунок только по горизонтали, repeat-y – повторяет рисунок только по вертикали)
background-attachment – регулирует, будет ли фоновый рисунок перемещаться при прокрутке страницы (scroll, стандартное значение) или нет (fixed) .
background-position – определяет расположение (координаты) фона
Background-color
Задает цвет фона элемента. Главное отличие этого свойства от атрибута BGCOLOR языка HTML в том, что с его помощью можно задать фоновый цвет для любого элемента. На первый взгляд, преимущество незначительное, однако после конкретного примера все становится на свои места. Допустим, нам надо сделать блок, в котором будет серый фон. С помощью HTML в таком случае без таблицы не обойтись, а вот с помощью CSS можно приписать стиль, например, для тега P.
HTML (101 знак) | CSS (79 знаков) |
<TABLE> <TR><TD bgcolor=#666666> Белый текст на сером фоне </FONT> | P{ background-color: #666; color: #FFF} <P>Белый текст на сером фоне</P> |
Background-image
Задает графическое фоновое изображение. Вообще если указывается фоновое изображение, то рекомендуется указывать и фоновый цвет, потому что рисунок может не загрузиться или пользователь отключит загрузку изображений. В этом случае текст может плохо читаться на фоне по умолчанию, так что лучше указывать приемлемый фон явно.
Естественно, если устанавливать фоновое изображение для таблицы, то CSS не дает никаких преимуществ, однако с помощью CSS можно задать его для любого элемента.
HTML (112 знаков) | CSS (89 знаков) |
<TABLE> <TR><TD BACKGROUND=img/bg. gif> Белый текст на фоновом рисунке </FONT></TD></TR></TABLE> | P { background-image: url(img/bg. gif); color: #FFF } <P>Белый текст на фоновом рисунке</P> |
Background-repeat
Определяет, будет ли повторяться фоновое изображение (если оно задано) и если будет, то как. Значения:
· repeat: изображение повторяется по горизонтали и по вертикали
· repeat-x: изображение повторяется только по горизонтали
· repeat-y: изображение повторяется только по вертикали
· no-repeat: изображение не повторяется
В HTML подобного атрибута нет вообще, а по умолчанию изображение повторяется и по горизонтали, и по вертикали, так что работать с фоном только средствами HTML очень сложно.
Часто кодеры поступают следующим образом. Если надо, скажем, чтобы изображение не повторялось вообще, то делают рисунок таких размеров, чтобы его повторение не было заметно на любых мониторах. Это примерно 1600*1200 пикселей. Сами понимаете, что решение это корявое (увеличивается вес рисунка), но единственно возможное средствами HTML. С помощью CSS проблема решатся изящно и легко.
BODY { background-image: url(img/bg. gif); background-repeat: no-repeat} . . .
<BODY>
Содержимое страницы на фоновом неповторяющемся рисунке
</BODY>
Background-attachment
Задает, будет ли перемещаться фон вместе со всем содержимым страницы при скроллировании или нет. Вообще когда фон страницы не перемещается это несколько непривычно для посетителя сайта и иногда вызывает раздражение. Так что применяйте это свойство очень осторожно. Значения:
· fixed: фон будет оставаться неподвижным, а содержимое страницы будет перемещаться относительно него
· scroll: фон будет перемещаться вместе с остальным содержимым.
В HTML нет атрибута, равнозначного данному, а по умолчанию любой фон перемещается при скроллировании.
P {background-image: url(img/bg. gif);
background-repeat: no-repeat;
background-attachment: fixed
}. . .
<P>Текст на фоновом неповторяющемся и неподвижном рисунке</P>
Background-position
Задает положение фонового изображения. С помощью этого атрибута можно смещать фоновое изображение относительно левого верхнего угла элемента. Свойство имеет два параметра: первый определяет смещение по вертикали, второй – по горизонтали.
В качестве значений можно указывать длину как положительную, так и отрицательную. Например, описание:
P { background-image: url(img/bg. gif); background-position: -12px 50px}
определяет смещение фонового изображения на 12 пикселов влево и на 50 пикселов вниз, считая от левого верхнего угла элемента P. Кроме того, можно указывать процентные значения относительно ширины и высоты блока элемента. Например, описание:
P { background-position: 20% 40% }
смещает фоновое изображение на 20% вправо и на 40% вниз от левого верхнего угла блока элемента P. Значением по умолчанию является 0% 0%, что соответствует верхнему левому углу. Кроме того, можно вместо численных значений указывать выравнивание относительно элемента. Так для выравнивания по вертикали можно использовать три ключевых слова:
· top: выравнивание по верхнему краю;
· center: выравнивание по центру;
· bottom: выравнивание по нижнему краю.
Для выравнивания по горизонтали можно использовать ключевые слова:
· left: выравнивание по правому краю;
· center: выравнивание по центру;
· right: выравнивание по правому краю.
Таким образом, описание:
P { background-position: 0% 0% }
эквивалентно описанию:
P { background-position: top left }
В HTML нет атрибута, который бы соответствовал данному свойству, а значение по умолчания для фона, заданного средствами HTML, соответствует значению 0% 0%, заданному с помощью CSS.
P { background-image: url(img/bg. gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center}
. . .
<P>Текст на фоновом неповторяющемся и неподвижном рисунке, который отцентрирован по горизонтали</P>
К содержанию
Учебная задача 2. Изучи добавление и повторение фонового рисунка на Web-страницу.
Добавление рисунка происходит путем установки адреса картинки через ключевое слово url. Чтобы управлять повторением картинки применяются аргументы no-repeat (нет повторения), repeat-x (повторение по горизонтали) и repeat-y (повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную на рис. 1.
Рис. 1. Фоновая картинка без повторения
Чтобы установить картинку на веб-страницу, следует добавить параметр background к селектору BODY, как показано в примере 1.
Пример 1. Фоновый рисунок
<head><style type="text/css">BODY {background: url("pic. gif") /* Путь к графическому файлу */ no-repeat /* Отменяем повторение рисунка */ 30px /* Смещаем рисунок вправо */ 20px /* Сдвигаем рисунок вниз */}
</style></head>
В данном примере графический рисунок pic. gif определяется как фон веб-страницы без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера, она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного положения.
Повторение рисунка
Благодаря тому, что можно задавать повторение фонового рисунка по горизонтали или вертикали, доступно несколько вариантов оформления веб-страниц. Например, для создания вертикальной полосы по левому краю (рис. 2) понадобится изображение, показанное на рис. 3.
Рис. 2. Повторение рисунка по вертикали Рис. 3. Картинка для создания фона
Рисунок должен быть таким, чтобы по вертикали он состыковывался между собой без заметных швов, а также составлял единое целое с заданным цветом фона веб-страницы. В примере 2 приводится создание такого фонового рисунка, опять же с помощью параметра background и его аргумента repeat-y.
Пример 2. Повторение фона по вертикали
<head><style type="text/css">BODY { background: #fc0 /* Цвет фона веб-страницы */ url("pic. gif") /* Путь к графическому файлу */ repeat-y /* Повторение по вертикали */}</style></head>
Аналогично можно делать повторение фона по горизонтали, например, создав градиент и установив его в качестве фоновой картинки (рис. 4).
Рис. 4. Использование градиента в качестве фона
Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов, а высота рисунка зависит от цели документа и предполагаемой высоты содержимого веб-страницы. Не стоит также забывать, что рисунок большого размера приведет к увеличению объема графического файла. А это отрицательно скажется на скорости его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного случая вполне подошла картинка размером 30 х 200 пикселов (рис. 5).
Рис. 5. Градиентное изображение для создания фона
В примере 3 показан код HTML для создания градиентного фона.
Пример 3. Повторение фона по горизонтали
<head><style type="text/css">BODY { background: url("pic. gif") /* Путь к графическому файлу */ repeat-x; /* Повторяем фон по горизонтали */ text-align: center /* Выравнивание блока по центру */}DIV { margin: auto; /* Отступы вокруг блока */ width: 75%; /* Ширина блока */ height: 90%; /* Высота блока */ text-align: left; /* Выравнивание текста по левому краю */ padding: 10px; /* Поля вокруг текста */ background: white /* Цвет фона */}</style></head><body><div> Lorem ipsum... </div></body>
Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном примере добавляется слой, в котором и отображается содержимое веб-страницы.
К содержанию
Учебная задача 3. Изучи добавление цвета фона и рисунка к заголовку текста.
Для изменения цвета фона под текстом используется универсальный атрибут background, который следует добавить к тегу заголовка.
<html><head><style type="text/css"> H1 { background: #D9FFAD; /* Цвет фона под заголовком */ color: green; /* Цвет текста */ padding: 2px; /* Поля вокруг текста */ }</style></head><body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat.
</p></body></html>
Результат показан ниже.
Как добавить рисунок к тексту
С помощью фонового изображения можно автоматизировать процесс добавления рисунков к определенному тексту, например, к заголовкам. Для этого используется универсальный параметр background, который применяется к нужному селектору. В качестве значения указывают путь к рисунку и, чтобы он не повторялся, аргумент no-repeat (пример 4).
Пример 4. Добавление рисунка
<head><style type="text/css"> H2 { background: url('sample. gif') /* Путь к изображению */ no-repeat /* Не устанавливать повторение фона */ 1px /* Смещаем рисунок вправо */ 2px; /* Смещаем рисунок вниз */ padding-left: 20px; /* Отступ слева от текста */ }</style></head>
<body><h2>Заголовок</h2><p>Основной текст</p></body>
Как показано в данном примере, рисунок можно сдвигать по горизонтали и вертикали относительно своего исходного положения, по умолчанию это левый верхний угол блочного элемента. Это позволяет установить изображение по отношению к тексту желаемым образом. Чтобы текст не накладывался на рисунок, обязательно следует добавить параметр padding-left, за счет него текст смещается вправо на указанное расстояние. Оно в каждом случае индивидуально и обычно равно ширине рисунка и желаемому отступу между изображением и текстом.
При добавлении картинки указанным способом следует учитывать, что размер текста в браузере может меняться, а, следовательно, изменится и положение рисунка относительно текста. Кроме того, высота изображения ограничена высотой текста, поэтому рисунок при изменении размера текста будет отображаться иначе. На рис. 6 показан вид и положение картинки и текста при его разной величине.
Рис. 6. Отображение картинки при изменении размеров текста
Видно, что при увеличении размера заголовка, изображение книжки и текст меняют свое исходное положение. Такой разброс можно снизить, если в качестве единицы измерения применять em, поскольку эта единица привязана к высоте текста.
Если добавляется высокая картинка, то при уменьшении текста она «обрезается» снизу, а затем, при увеличении размера, рисунок отображается полностью.
К содержанию
Практика
Запиши приведенные варианты фонов и рисунков на языке HTML.
