Опубликован: 19.03.2007 | Доступ: свободный | Студентов: 4576 / 1139 | Оценка: 4.23 / 3.94 | Длительность: 23:37:00
Лекция 5:

Графические изображения

Фоновые изображения

Любой контейнер XHTML, от тега <body> и до тега <span>, может использовать графические изображения в качестве фона для текстового контента. Конечно, необходимо продуманно выбирать изображения, которые не мешают и не отвлекают от текстовой коммуникации, для которой предназначена страница.

Источники изображений

Изображение текстуры

Рис. 5.17. Изображение текстуры

Большинство фоновых изображений являются текстурами, а не рисунками. Рисунки оказываются слишком перегруженными и отвлекают внимание от сообщения. Эти текстуры являются стандартными изображениями GIF или JPEG, кроме того, эти изображения обычно не совпадают с размером контейнера, для которого они создают фон. Текстуры являются небольшими, специально созданными изображениям, которые могут повторяться на странице и незаметно соединяться, чтобы сформировать однородный фон.

Изображение на рисунке 5.17 является типичным изображением, используемым в качестве фона для элементов страницы. Оно выводит текстуру, которая хорошо согласуется, когда изображение повторяется горизонтально и вертикально вдоль и поперек области фона элемента страницы. Повторяемые текстуры, такие, как эта, иногда трудно создать, но существует множество готовых, доступных на большинстве сайтов репродукций в Web.

Стили фона

Существует четыре свойства стиля, относящихся к выводу фоновых изображений в текстовых контейнерах. Эти стили, показанные в таблице 5.3, выбирают изображение, повторяют его, позиционируют и закрепляют изображение для прокрутки поверх него текста. Не все эти свойства требуются всем фоновым изображениям.

Таблица 5.3. Свойства стиля фона
Свойство Значение
background-attachment
Задает соединение фонового изображения с документом, 
будет ли изображение прокручиваться  вместе с текстом или 
нет.
     fixed
     scroll
background-image
Задает фоновое изображение элемента страницы, 
определяемое как 
     url(url)
     none
background-position
Задает положение верхнего левого угла фонового 
изображения относительно верхнего левого угла 
контейнерного элемента, используя физический размер, 
процент, ключевое слово или пару ключевых слов.
  left top
  left% top%
  top|right|bottom|left|center 
  top left|top center|top right 
  center left|center center|center right 
  bottom left|bottom center|bottom right
background-repeat
Задает повторение фонового изображения по горизонтали, 
по вертикали, в обоих направлениях или вывод без 
повторения. 
  repeat-x
  repeat-y
  repeat
  no-repeat

Фоновое изображение определяется с помощью свойства background-image:url(url), где расположение файла изображения задается его адресом url. Если файл изображения хранится в том же месте, что и страница, то необходимо ввести только имя файла. Если никакие другие настройки стиля в отношении фонового изображения не задаются, то оно повторяется горизонтально и вертикально, вдоль и поперек контейнера, чтобы заполнить фон изображением.

Страница, показанная на рисунке 5.18, использует свойство background-image для заполнения страницы горизонтально и вертикально с помощью текстуры. Никакие другие свойства стиля не требуются.

<style type="text/css">
  body {background-image:url(Background.jpg)}
</style>
Страница с изображением текстуры, используемым в качестве фона

Рис. 5.18. Страница с изображением текстуры, используемым в качестве фона

Изображение Background.jpg имеет реальный размер 144 х 144 пикселя. Если дополнительных свойств стиля не задано, изображение автоматически повторяется поперек и вниз по странице, чтобы заполнить все доступное пространство.

Конечно, в качестве фоновых изображений не обязательно применять повторяющиеся текстуры. Можно воспользоваться любым изображением GIF или JPEG. Однако надо быть осторожным при использовании обычных изображений в качестве фона, так как они могут иметь слишком яркие цвета и затруднять чтение расположенного поверх текста. Если имеется программа редактирования изображений, то можно уменьшить плотность или прозрачность изображения, смягчить его интенсивность для применения в качестве изображения водяного знака. Это было сделано для изображения, показанного на рисунке 5.19.

<style type="text/css">
  body {background-image:url(Stonehenge.jpg)}
</style>
Страница с повторяющимся фоновым изображением с уменьшенной плотностью

Рис. 5.19. Страница с повторяющимся фоновым изображением с уменьшенной плотностью

Как в случае предыдущей текстуры фона, изображение повторяется и по горизонтали, и по вертикали, чтобы заполнить всю страницу. Этот повторяющийся шаблон более заметен при использовании обычного графического изображения.

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!