Фон сливается со страницей

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

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

увеличить изображение
Простой фон с использованием двух веб-устойчивых цветов обеспечивает хороший контраст с текстом

Выберите цвет фона, хорошо контрастирующий с текстом – светлый фон для черного текста, например. Убедитесь, что вы выбрали веб-устойчивый цвет – тот, который может быть отображен как сплошной в любом броузере. (Ничего не знаете о веб-устойчивых цветах? См. раздел "Номера цветов в сети".) Следующий тэг <BODY>, например, устанавливает светло-оливковый фон, который является веб-устойчивым и обеспечивает контраст с черным текстом.
<body bgcolor="#cccc99">
Если вы используете фоновый рисунок, постарайтесь упростить его. Если необходимо, отредактируйте изображение в графическом редакторе. Например, уменьшите до минимума количество цветов, выбрав цвета, не слишком контрастирующие друг с другом. Если возможно, используйте веб-устойчивые цвета – это лучший способ создать фон без дефектов изображения. Переведите такое изображение в формат GIF, хорошо отображающий области сплошного цвета. (За другими идеями обращайтесь к разделу "Цвета в рисунке GIF зернистые и неровные".)
Если вы выбрали в качестве фона фотографию или разноцветный рисунок, постарайтесь сделать его неброским. (Может быть, удобнее использовать рисунок только на какой-то части страницы.) Чтобы приглушить рисунок на заднем плане и повысить контраст с передним планом, исправьте рисунок в своей графической программе. Увеличьте яркость, убавьте контраст и цветовую насыщенность, чтобы "размыть" рисунок. (Если задний фон темный, а ваш текст – светлый, то яркость нужно будет понизить.) Сохраните этот рисунок в формате JPEG, чтобы точнее передать цвета.
Если вы решили расположить на заднем фоне цветной рисунок или фотографию, которые обеспечивают не слишком хорошую читаемость, попробуйте расположить текст в областях сплошного цвета. Для этого включите текст в таблицу и установите задний фон таблицы сплошным цветом. В этом примере фоном является фотография, а таблица обеспечивает область сплошного цвета для отображения текста.

С цветным рисунком в качестве фона одноцветная таблица отображает легко читаемый текст

<body background="boat.jpg "> <table bgcolor="#cc9933" width=320 cellpadding=8> . . . </table>
По умолчанию броузер замастит (повторит по всей странице) ваш фоновый рисунок. Если при этом видны края вашего фонового рисунка, измените его, чтобы добиться большей четкости. (Подробнее об этом см. раздел "Мне не нравится, как повторяется фоновый рисунок".)
Всякий раз, внеся изменения в фон, просматривайте страницу – трудно сказать, как будет выглядеть текст на конкретном фоне, пока сам не увидишь. Продолжайте вносить изменения, пока не получите достаточный контраст между передним и задним планом.

Содержание раздела