Фоновые изображения и определение фона

CSS свойства определения фона позволяют управлять фоном HTML элементов.

---

CSS свойство background-color

Свойство background-color определяет фоновый цвет элемента.

Вот так можно задать фоновый цвет для всей веб-страницы:

body {
  background-color: lightblue;
}

В CSS цвет можно задать как

• имя цвета - например, "red",
• HEX значение - например, "#ff0000",
• RGB значение - например, "rgb(255,0,0)",

Подробнее о цветах рассказывается в главе нашего учебника Как использовать цвета.

Другие элементы

Фоновый цвет можно задавать для любых HTML элементов.

В следующем примере для элементов <h1>, <p> и <div> задаются разные фоновые цвета:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

Прозрачность/непрозрачность

Свойство opacity определяет прозрачность элемента. Оно принимает значение от 0.0 до 1.0. Чем меньше значение, тем больше прозрачность:

Пример:

div {
  background-color: green;
  opacity: 0.3;
}

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

Определение прозрачности при помощи RGBA

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

Ранее в главе Как использовать цвета вы узнали, что вы можете использовать RGB как значение цвета. Дополнительно к этому вы можете использовать RGB значение цвета с альфа-каналом (RGBA), который определяет прозрачность цвета.

RGBA значение цвета определяется CSS функцией rgba(red, green, blue, alpha). Параметр alpha - это число от 0.0 (полная прозрачность) до 1.0 (полная непрозрачность).

Подробнее о RGBA цветах вы можете прочитать в главе RGB цвета.

Пример:

div {
  background: rgba(0, 128, 0, 0.3) /* Зеленый фон с 30% непрозрачностью цвета */
}

CSS свойство background-image

Добавляя изображения к тексту, иногда возникает желание установить какое-либо изображение в качестве фонового. Для этого существует CSS свойство background-image, которое позволяет определить изображение для использования в качестве фона HTML элемента.

По умолчанию изображение дублируется, чтобы закрыть весь элемент.

Зададим фоновое изображение для всей веб-страницы:

body {
  background-image: url("paper.gif");
}

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

Здесь задается фоновое изображение для элемента <p>:

p {
  background-image: url("paper.gif");
}

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

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

CSS свойство background-repeat

По умолчанию свойство background-image отображает изображение дублируя его по горизонтали и по вертикали.

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

Для того, чтобы фоновое изображение дублировалось только горизонтально, нужно добавить свойство background-repeat: repeat-x;:

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Чтобы фоновое изображение дублировалось только вертикально, нужно добавить свойство background-repeat: repeat-y;

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-y;
}

CSS свойство background-repeat: no-repeat

Для отображения фонового изображения только один раз также используется свойство background-repeat:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

CSS свойство background-position

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

Свойство background-position может принимать значение top, center, bottom, left, right, либо процентные значения, либо сочетание этих значений.

В следующем примере фоновое изображение будет отображаться в верхнем левом углу:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

CSS свойство background-attachment

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

В следующем примере фоновое изображение будет фиксироваться на месте:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

В следующем примере фоновое изображение будет прокручиваться вместе с содержимым страницы:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

CSS свойство background

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

Вместо того, чтобы записать:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Можно использовать свойство background:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

В коротком свойстве background будет следующий порядок значений:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

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

Все CSS свойства управления фоном элемента

Свойство	Описание
background	Короткое свойство, устанавливающее все свойства фона элемента за одну декларацию
background-attachment	Определяет, будет ли фоновое изображение зафиксировано, или оно будет прокручиваться вместе с остальным содержимым страницы
background-blend-mode	Устанавливает режим наложения фонового изображения элемента на фоны других элементов
background-clip	Устанавливает область прорисовки фонового изображения
background-color	Определяет фоновый цвет элемента
background-image	Определяет фоновое изображение элемента
background-origin	Устанавливает область позиционирования фонового изображения
background-position	Задает начальное положение фонового изображения в пределах содержащего его элемента
background-repeat	Определяет, как будет повторяться фоновое изображение
background-size	Устанавливает размер фонового изображения