Фон HTML

Хороший фон делает сайт особенно привлекательным.

Пример

Хорошее сочетание фона и цвета
Пример хорошего сочетания фона и цвета текста, что делает текст на странице легко читаемым.
Плохое сочетание фона и цвета
Пример плохого сочетания фона и цвета текста, что делает текст на странице трудно читаемым.

(Более многие примеры можно найти в нижней части этой страницы)

Фон (Backgrounds)

<body> Имеет два тега для настройки фона. Фон может быть цветом или изображением.

Цвет фона (Bgcolor)

Свойство фона устанавливает фоновый цвет. Значение может быть шестнадцатеричным числом, значением RGB или именем цвета.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Следующие коды устанавливают цвет фона в чёрный.

Фон (Background)

Атрибут фона устанавливает фоновое изображение. Значением атрибута является URL изображения. Если размер изображения меньше размера окна браузера, изображение будет повторяться по всему окну браузера.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

URL может быть относительным, как в первом строке кода. Он также может быть абсолютным, как во второй строке кода.

Совет:Если вы планируете использовать изображение фона, вы должны запомнить несколько моментов:

  • Добавляет ли изображение фона время загрузки страницы? Примечание: размер файла изображения не должен превышать 10k.
  • Как хорошо сочетается изображение фона с другими изображениями на странице?
  • Как хорошо сочетается изображение фона с цветом текста на странице?
  • Как выглядит изображение, когда оно тиснётся по странице?
  • Была ли внимание к тексту перебита изображением фона?

Основные注意事项 - полезные советы:

Атрибуты фона (bgcolor), фона (background) и текста (text) в теге <body> в последних стандартах HTML (HTML4 и XHTML) устарели. W3C удалил эти атрибуты из своих рекомендаций.

Следует использовать каскадные таблицы стилей (CSS) для определения макета и свойств отображения элементов HTML.

Больше примеров

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