Приднестровская поддержка XOOPS
В те дни, когда 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.
Отправитель | Нити |
---|
2 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 2 далее... |