Оглавление

Размещение текста поверх изображения

В те дни, когда CSS еще не существовало, добавить текст поверх изображения можно было только с помощью графической программы! CSS предлагает гораздо более эффективный метод создания такого эффекта.

 

Решение
Для размещения текста над изображением проще всего использовать изображение в качестве фонового. Изображение под заголовком Закачки в блоке со списком закачек появилось благодаря использованию следующего правила стилей:

 

#smallbox h2 {
margin: 0;
padding: 0.2em;
background-image: url(boxheaderbg.jpg);
background-repeat: no-repeat;
color: #FFFFFF;
background-color:  blue;
font-size: 140%;
font-weight: normal;
}

 

Задание фонового изображения для заголовка блока

Рис. 3.12. Задание фонового изображения для заголовка блока со списком закачек (DEMO)

 

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

 

 

Совет
Проверьте контрастность! При добавлении светлого текста поверх изображения (как на рис. 3.12) область его размещения следует залить темным цветом. Это обеспечит видимость текста при отключении изображений или при медленной скорости соединения, когда изображения загружаются не сразу.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити