6. Цвет и фон

На этой странице:

• Цвет
• Фон
  • Фоновый цвет
  • Фоновые изображения
  • Задание фоновой картинки
  • Повторения в определённом направлении
  • Позиционирование начального положения картинки
  • Позиционирование фона относительно окна
  • Интегрированное свойство для задания фона
• Атрибут background элемента BODY
• Дизайн фона
  • Плитки плохо стыкуются
  • Текст не читается
  • О важности явного задания цветов текста и фона

Цвет

color Значения: <цвет> | inherit По умолчанию: в зависимости от браузера Область применения: все элементы Наследование: да

Свойство color задаёт цвет текста элемента и цвет его рамки (если цвет рамки отдельно не задан). Это свойство передаётся по наследству потомкам.

Файл style.css P { color: blue; border: 4px solid; padding:1em; }

Файл index.htm

Фон

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

Фоновый цвет

background-color Значения: <цвет> | transparent | inherit По умолчанию: transparent Область применения: все элементы Наследование: нет

Файл style.css .warning { background-color:#ffc; border: 2px dotted red; padding:1em; margin: 1em 2em; }	Файл index.htm
Файл style.css H1 { color:white; background-color:rgb(20%,20%,20%); padding:0.2em; }	Файл index.htm

Фоновые изображения

Несмотря на то, что начальным положением картинки по стандарту является верхний левый угол внутреннего отступа, паркетная укладка распространяется и на рамку, так как фон замащивается во всех четырёх направлениях.

Для “укладки паркета” на фон элемента можно воспользоваться свойством background-image.

Задание фоновой картинки

background-image Значения: <url> | none | inherit По умолчанию: none Область применения: все элементы Наследование: нет

Значение none приводит к тому, что и можно ожидать: изображение на фоне отсутствует.

Файл style.css BODY { color:white; background-color:rgb(20%,20%,20%); background-image:url(pic/fon1.jpg); } Фоновая плиточка fon1.jpg:

Файл index.htm

Заметим, что в примере, наряду с фоновой картинкой, задан и цвет фона. Так поступать рекомендуется всегда.

Представьте, что картинка, по какой либо причине, не дошла по сети до браузера, или пользователь отключил показ картинок. Вот что тогда он увидит на экране, если цвет фона не задан:

А если цвет фона задан, совсем другое дело:

Повторения в определённом направлении

По умолчанию фоновая картинка укладывается паркетом из начального положения и по горизонтали, и по вертикали. Этот алгоритм можно изменить, если воспользоваться свойством background-repeat.

background-repeat Значения: repeat | repeat-x | repeat-y | no-repeat | inherit По умолчанию: repeat Область применения: все элементы Наследование: нет Значение repeat заставляет браузер укладывать паркет по всем направлениям, а значение no-repeat запрещает повторение. Значение repeat-x укладывает картинку только по горизонтали, а значение repeat-у — только по вертикали.

Рассмотрим в качестве примера, как задаётся вертикальная полоска, играющая роль страничного поля (как на странице этого учебника).

Файл style.css BODY { color:black; background-color:white; background-image:url(pic/fon.png); background-repeat:repeat-y; margin-left:0; padding-left:100px; } Фоновая плиточка fon.png: Реальная высота фоновой картинки — 1 пиксел. Здесь она показана более высокой для наглядности.

Файл index.htm

Позиционирование начального положения картинки

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

Начальное положение фоновой картинки можно изменить при помощи свойства background-position.

Свойство background-position задаёт координаты начального (базового) положения фоновой картинки, то есть того положения, из которого начинает укладываться фоновый паркет (по горизонтали, вертикали или во всех направлениях, в зависимости от значения свойства background-repeat).

В качестве значений допускаются: ключевые слова, проценты, единицы размера и смесь.

Ключевые слова

Ключевые слова обычно используется в паре, например, right top: начальное положение картинки — правый верхний угол. Ключевое слово center совмещает центральную точку фоновой картинки (по соответствующей оси) с центральной точкой элемента (по той же оси).

Допускается использование одного значения (по горизонтали или по вертикали), при этом значение второго автоматически полагается равным center:

Проценты

Первое процентное значение задаёт смещение от левого верхнего угла по горизонтали, второе — по вертикали.

Картинка размещается так, что её точка, расположенная в указанном процентном отношении относительно картинки, совпадает с точкой на элементе, расположенной в том же процентном отношении относительно элемента.

Таким образом, указание 0% 0% размещает левый верхний угол картинки в левом верхнем углу элемента (эквивалентно left top), а указание 100% 100% размещает правый нижний угол картинки в правом нижнем углу элемента (эквивалентно right bottom). Указание 50% 50% размещает центральную точку картинки в центральной точке элемента (эквивалентно center center).

Если задано одно процентное значение, то оно используется как значение по горизонтали, а значение по вертикали автоматически полагается равным 50%.

Единицы измерения размера

Если начальное положение картинки задано в единицах размера, то они интерпретируются как расстояния от левого верхнего угла элемента до левого верхнего угла картинки.

Если задано одно значение, то оно используется как значение по горизонтали, а значение по вертикали автоматически полагается равным 50% (или, что то же самое — center).

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

Смесь

Допускается комбинировать разные способы позиционирования, при этом первое значение должно указываться для горизонтали, второе — для вертикали.

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

Пример

В качестве примера рассмотрим оформление замечания на страницах этой книги.

Картинка, которую вы видите в шапке замечания, построена как фоновое изображение, в HTML-коде ей не соответствует элемент IMG.

Файл style.css BODY { color:black; background-color:white; } /* Оформление замечания */ .note { border-left:1px dotted gray; padding-top:90px; padding-left: 1em; background-image:url(pic/note.gif); background-repeat:no-repeat; background-position:1em top; color:#666; font-size:0.9em; } Высота картинки — 82 пиксела, она помещается в верхний внутренний отступ размеров в 90 пикселов.

Файл index.htm

Позиционирование фона относительно окна

Начальные координаты фоновой картинки браузер считает по умолчанию заданными относительно элемента, для которого описан фон (начало координат — левый верхний угол внутреннего отступа элемента).

При помощи свойства background-attachment можно перенести начало координат в левый верхний угол области просмотра окна браузера, если задать значение fixed.

background-attachment Значения: sroll | fixed | inherit По умолчанию: sroll Область применения: все элементы Наследование: нет

При значении fixed фон не прокручивается вместе с содержимым. Если картинка задана без повторений (или с повторением по одной оси), она становится видимой, если только не лежит за пределами рамки элемента.

Файл style.css BODY { color:black; background-color:white; background-image:url(pic/spider.png); background-repeat:no-repeat; background-attachment:scroll; } H1 {margin-left:120px;} Фон задан для BODY со значением scroll. Фон прокручивается вместе с документом.	Файл index.htm
Файл style.css BODY { color:black; background-color:white; background-image:url(pic/spider.png); background-repeat:no-repeat; background-attachment:fixed; } H1 {margin-left:120px;} Фон задан для BODY со значением fixed. Фон не прокручивается вместе с документом.	Файл index.htm

Браузер IE вплоть до версии IE6 неправильно обрабатывает фиксированный фон в отличных от BODY элементах — фон позиционируется не относительно окна, а относительно элемента. Проверьте это, запустив следующий пример в разных браузерах.

Файл style.css BODY { color:black; background-color:white; } P.first { background-image:url(pic/spider.png); background-repeat:no-repeat; background-attachment:fixed; } Фон задан для первого абзаца со значением fixed. В браузерах, которые работают по стандарту, фоновая картинка видна лишь тогда, когда совмещается с первым абзацем (при прокрутке).

Файл index.htm

Интегрированное свойство для задания фона

Все свойства фона можно свести в одну интегрированную запись при помощи свойства background.

Как и во всех интегрированных свойствах, если опустить одно из значений, вместо него автоматически подставляется значение по умолчанию. Таким образом, следующие два правила эквивалентны:

background: white url(pic/fon.gif);   
background: white url(pic/fon.gif) left top repeat scroll;   
  

Свойство background не имеет обязательных параметров, достаточно присутствия только одного. Например, следующие два правила почти эквивалентны:

background-color: white;   
background: white;   
  

Почему почти? Не надо забывать, что интегрированное свойство background устанавливает все параметры для фона, включая и те, которые в нём опущены (их значения устанавливаются по умолчанию).

Пусть, например, для элементов H1 и H2 установлен фон с картинкой без укладки в паркет с выравниванием по центру элемента:

                                         
H1, H2 { background: gray url(pic/fon.gif) center no-repeat; }   
  

Допустим, для H2 нужно сменить цвет фона, сохраняя все другие параметры. Определение

                                         
H2 { background: silver; }   
  

расположенное следом за первым, приведёт к тому, что у элементов H2 будет сплошной серебряный фон без фоновой картинки. Правильным решением будет такой набор определений:

                                         
H1, H2 { background: gray url(pic/fon.gif) center no-repeat; }   
H2 { background-color: silver; }   
  

Пример

Предложим в качестве примера ещё один способ оформления замечания.

Изобразим макет в виде следующей схемы:	Вот такой объект мы хотим построить. Замечание имеет отступы слева и справа, светло-зелёный фон, прерывистую рамку. В блоке выделен заголовок: текст записан вывороткой поверх фона с градиентной растяжкой цвета, слева расположен рисунок — своеобразный маркер замечания.
Представим объект в виде блока note в который вложены два последовательных блока: header (заголовочная часть) и content (содержательная часть). На иллюстрации между блоками показаны промежутки для наглядности, реально их не будет.	Макету на иллюстрации слева соответствует следующий HTML:

Картинки, которые будем использовать для заголовка замечания:

/* Блок замечания */
.note
{
  margin: 1em 2em;  /* Внешние отступы блока-замечания */
  border: 1px dotted gray;  /* Рамка */
  /* Фон с градиентной растяжкой цвета */
  background:#f4fbf4 left top url(pic/hfon.png) no-repeat;
}
/* Заголовок внутри блока замечания */
.note .header
{
  height:50px;       /* Высота блока-заголовка */
  color:white;       /* Цвет текста заголовка */
  font-size:40px;    /* Фиксированный размер шрифта */
  font-weight:bold;  /* Жирное начертание */
  /* Маркер */
  background:5px 5px url(pic/marker.png) no-repeat;
  padding-left:60px; /* Отступ текста от маркера */
  border-bottom: 1px dotted gray; /* Рамка снизу */
}
/* Содержательная часть замечания */
.note .content
{
  /* Отступы содержания */
  padding:0 10px 10px;
}
      

Атрибут background элемента BODY

Для элемента BODY предусмотрен атрибут background, который позволяет задать фоновую картинку для гипертекстовой страницы документа.

Атрибут background позволяет задать картинку лишь для сплошного (во всех направлениях) фонового паркета, и не имеет возможностей одноимённого стилевого свойства.

Кроме того, атрибут background можно записывать только для элемента BODY, в то время как стилевое свойство background можно назначать любому элементу на странице.

Дизайн фона

Рассмотрим вопросы дизайна, связанные с использованием картинки для фона.

Плитки плохо стыкуются

Чтобы фоновый “паркет” смотрелся красиво, необходима визуальная стыковка плиточек между собой. Это надо учитывать при создании фоновой иллюстрации.

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

Текст не читается

На шершавом фоне текст всегда читается хуже, чем на гладком:

Когда фоновая картинка кажется необходимой, текст надо выводить в гладкие области:

О важности явного задания цветов текста и фона

Цвета текста и фона могут быть заданы на странице CSS-свойствами color и background. Кроме того, они могут задаваться атрибутами text и bgcolor в теге <BODY> (CSS-свойства главнее).

Если цвета не описаны, браузер будет использовать их значения по умолчанию (разные в разных браузерах).

Нужно обязательно задавать цвета явно, чтобы не потерять контроль над важными визуальными параметрами страницы.

Кроме того, задавать фоновый цвет нужно и в том случае, когда используется фоновая картинка.

Для этой рекомендации есть две причины:

• В браузере графика может быть отключена, и фоновую картинку пользователь не увидит.
• Фоновая картинка “приходит” по сети после того, как страница построена и заменяет фоновый цвет. Чтобы такая перемена не “ударила” по глазам пользователя, нужно подбирать цвет фона близким к доминирующему цвету фоновой картинки.

“Удар” по глазам пользователя:

Плавный переход от гладкого фона к фактурному:

А если фоновая картинка, цвет фона и цвет текста задаются при помощи стилевых свойств?

BODY
{
  background:#fbeee7 repeat-y url(pic/fon.gif);
  color:black;
}
   

Может быть в этом случае не нужно записывать соответствующие атрибуты для тега BODY?

Рекомендуется и в этом случае не игнорировать эти важные атрибуты. На всякий случай. Для браузеров, которые не поддерживают CSS.