Использование фона для оформления текста

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

Цвет в CSS чаще всего задаётся в шестнадцатеричном формате с символом решётки в начале:

#000000 — чёрный цвет;
#ffffff — белый цвет;
#ff0000 — красный цвет и так далее.

Фоновое изображение для блока задаётся свойством background-image, а фоновый цвет — свойством background-color:

div {
  background-image: url("путь_к_файлу_изображения.png");
  background-color: #cccccc;
}

Фоновое изображение и фоновый цвет блока всегда должны достаточно сильно контрастировать с цветом текста. Чем больше контраст, тем удобнее читается текст в разных условиях освещённости и на разных устройствах. Поэтому если вы задаёте блоку фоновое изображение, нужно обязательно дополнительно задавать подходящий фоновый цвет. В этом случае, пока изображение загружается, или в случае, если оно совсем не загрузится, текст всё равно можно будет прочитать:

p {
  /* идеальный контраст: цвет текста белый, цвет фона — чёрный */
  background-color: #000000;
  color: #ffffff;
}

span {
  /* плохой контраст: цвет текста и фона — серые */
  background-color: #cccccc;
  color: #dddddd;
}

Подробно работа с фонами в CSS рассматривается в части «Фоны. Знакомство» и «Рамки и фоны. Погружение».