Как применять фоновые изображения с помощью css
Использовать CSS для применения изображений в качестве фона достаточно легко. Прежде чем рассматривать приведенный ниже код CSS, загрузите файл примера imagesandcss.html в браузер или посмотрите на рисунок 17.4, чтобы получить представление о всевозможных вещах, которые можно делать с фоновыми изображениями в CSS.
Рис. 17.4. Фоновые изображения с помощью CSS
Различные рамки являются, в действительности, стилизованными элементами заголовками h2 с некоторым заполнением и рамками, применяемыми с помощью CSS, чтобы создать достаточно пространства для фонового изображения. Если просмотреть файл HTML, то можно увидеть, что каждый элемент h2 имеет уникальный id, позволяющий каждому из них использовать различные правила CSS. CSS для первого примера имеет следующий вид:
background-image:url(ball.gif);
background-color:#eee;
Изображение добавляется с помощью селектора background-image, для которого задается в скобках URL, чтобы определить добавляемое изображение. В качестве запасного варианта, на тот случай, если оно будет недоступно, необходимо также задать фоновый цвет с помощью селектора background-color и значение цвета (шестнадцатеричного значения, имени или RGB). В данном случае был выбран светло-серый цвет.
По умолчанию, фоновые изображения будут повторяться по горизонтали и по вертикали, чтобы заполнить все пространство элемента. Можно однако определить другой вариант повторения с помощью селектора background-repeat:
Вообще не повторять изображение: background-repeat:no-repeat;
Повторять изображение только по горизонтали: background-repeat:repeat-x;
Повторять изображение только по вертикали: background-repeat:repeat-y;
По умолчанию, фоновое изображение (если оно не повторяется) будет помещаться в верхнем левом углу элемента. Можно однако использовать background-position для смещения фонового изображения. Простейшими значениями для выбора являются top, center, и bottom для вертикального смещения, и left, center, и right для горизонтального смещения. Например, чтобы разместить изображение внизу справа, необходимо использовать background-position:bottom-right;, в то время как для размещения изображения по центру в вертикальном направлении и справа необходимо использовать background-position:center-right;.
Управляя повторением и позицией фоновых изображений, и используя интересные изображения можно создавать множество удивительных эффектов, которые были невозможны до появления CSS, а сохранение определения фона в отдельном файле CSS существенно облегчает изменение внешнего вида всего сайта, изменяя несколько строк кода. Все это будет рассмотрено подробнее позже.
Заключение
Это все, что нужно знать, когда речь идет о добавлении изображений в HTML. Существует еще множество приемов использования изображений и CSS, но пока остановимся на том, что было рассмотрено здесь, и сосредоточимся на проверенных способах применения изображений. Мы расссмотрели следующие вопросы:
Элемент img и его основные атрибуты:
src для местоположения файла изображения
alt для текста, который должен быть доступен, когда изображение не загружается или его невозможно увидеть
title для интересной (но несущественной) дополнительной информации
longdesc для указания на внешний файл данных, содержащий альтернативное текстовое представление данных, проиллюстрированных изображением, когда изображение является, например, сложным графиком
width и height, чтобы сообщить браузеру размер изображения, чтобы он мог выделить для него подходящее пространство
Основы фоновых изображений CSS
Когда использовать фоновые изображения (по сути, когда изображение не должно иметь текстового альтернативного представления, но является для компоновки только "украшением" или "элементом экрана").
Как размещать и повторять фоновые изображения в CSS