CSS Фон
Свойства фона CSS используются для определения фона HTML-элементов.
Свойства CSS определяют эффекты фона:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Цвет фона
Свойство background-color определяет цвет фона элемента.
Цвет фона страницы задается в селекторе body:
В CSS значения цвета обычно задаются следующими способами:
- Шестнадцатеричное значение - например, "#ff0000"
- RGB - например: "rgb(255,0,0)"
- Название цвета - например: "red"
В следующих примерах элементы h1, p и div имеют разные цвета:
Пример
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Попробуйте сами »
Фоновое изображение
Свойство background-image описывает фоновое изображение элемента.
По умолчанию фоновое изображение повторяется (замостится), чтобы покрыть весь элемент.
Пример настройки фонового изображения страницы:
Ниже приведён пример неудачного сочетания текста и фонового изображения. Читаемость текста плохая:
Фоновое изображение — повторение по горизонтали или вертикали
По умолчанию свойство background-image повторяется в горизонтальном и вертикальном направлении страницы.
Некоторые изображения выглядят очень несогласованно, если их повторять и по горизонтали, и по вертикали, как показано ниже:
Если изображение повторяется только по горизонтали (repeat-x), фон страницы будет лучше:
Пример
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Попробуйте сами »
Фоновое изображение — установка позиционирования и отключение повторения
Сделайте так, чтобы фоновое изображение не влияло на компоновку текста
Если вы не хотите, чтобы изображение повторялось, можно использовать свойство background-repeat:
Пример
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
Попробуйте сами »
В приведённых выше примерах фоновое изображение и текст отображаются в одной и той же позиции. Чтобы сделать макет страницы более рациональным и не влиять на чтение текста, мы можем изменить положение изображения.
Вы можете использовать свойство background-position, чтобы изменить положение изображения на фоне:
Пример
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Попробуйте сами »
Фон — сокращённое свойство
В приведённых выше примерах мы видим, что цвет фона страницы управляется с помощью множества атрибутов.
Чтобы упростить код для этих свойств, мы можем объединить их в одно свойство.
Сокращённым свойством для фоновых цветов является "background":
При использовании сокращённого свойства порядок значений свойств следующий:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Вам не нужно использовать все вышеперечисленные свойства; вы можете использовать их в соответствии с фактическими потребностями страницы.
В этом примере используется ранее представленный CSS. Вы можете просмотреть соответствующие примеры:Примеры CSS
Другие примеры
Как установить фиксированное фоновое изображение
Этот пример демонстрирует, как установить фиксированное фоновое изображение. Изображение не будет прокручиваться вместе с остальной частью страницы.
Свойства background в CSS
| Свойство | Описание |
|---|---|
| background | Сокращённое свойство используется для установки свойств background в одном объявлении. |
| background-attachment | Определяет, является ли фоновое изображение фиксированным или прокручивается вместе с остальной частью страницы. |
| background-color | Задаёт цвет фона элемента. |
| background-image | Задаёт изображение в качестве фона. |
| background-position | Задает начальную позицию фонового изображения. |
| background-repeat | Задает, повторяется ли фоновое изображение и как. |