В CSS свойства фона используются для определения фоновых эффектов для элементов.
CSS свойства фона:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Фоновый цвет
background-color свойство задает цвет фона элемента.
Цвет фона страницы устанавливается следующим образом:
С помощью CSS, цвет чаще всего определяется:
- действительное имя цвета - как "red"
- значение HEX - как "#ff0000"
- Значение RGB - как "rgb(255,0,0)"
Посмотрите на CSS Цвет Значения для полного списка возможных значений цвета.
В приведенном ниже примере <h1>, <p> и <div> элементы имеют разные цвета фона:
пример
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} Попробуй сам " Изображение на заднем плане
background-image свойство определяет изображение для использования в качестве фона элемента.
По умолчанию изображение повторяется так оно охватывает весь элемент.
Фоновое изображение для страницы может быть установлен следующим образом:
Ниже приведен пример плохой сочетания текста и фонового изображения. Текст почти не читаем:
 | Примечание: При использовании фонового изображения, использовать изображение , которое не нарушает текст. |
|---|
Фоновое изображение - Повтор по горизонтали или вертикали
По умолчанию, background-image свойство повторяет изображение по горизонтали и по вертикали.
Некоторые изображения должны повторяться только по горизонтали или по вертикали, или они будут выглядеть странно, как это:
Если изображение выше, повторяется только по горизонтали ( background-repeat: repeat-x; ), фон будет выглядеть лучше:
пример
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Попробуй сам " | Примечание: Для того, чтобы повторить изображение по вертикали установить background-repeat: repeat-y; |
|---|
Фоновое изображение - Установить позицию и не повторять
Показаны фоновое изображение только один раз также задается в background-repeat собственности:
В приведенном выше примере, то фоновое изображение показано на том же самом месте, что и текст. Мы хотим изменить положение изображения, так что он не мешает текст слишком много.
Положение изображения задается background-position собственности:
пример
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Попробуй сам " Фоновое изображение - Фиксированная позиция
Чтобы указать , что фоновое изображение должно быть фиксированным (не будет прокручиваться с остальной части страницы), используйте background-attachment свойство:
пример
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Попробуй сам " Фон - сокращённое свойство
Для сокращения кода, можно также указать все свойства фона в одном собственности. Это называется сокращенным свойством.
Сокращённое свойство для фона background :
При использовании сокращённое свойство порядок значений свойств является:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
Это не имеет значения, если одно из значений свойств отсутствует, до тех пор, как остальные находятся в таком порядке.
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »
Все свойства CSS фона
| Имущество | Описание |
|---|---|
| background | Устанавливает все свойства фона в одной декларации |
| background-attachment | Устанавливает ли фиксирована или прокручивается фоновое изображение с остальной частью страницы |
| background-color | Устанавливает цвет фона элемента |
| background-image | Устанавливает фоновое изображение для элемента |
| background-position | Устанавливает начальное положение фонового изображения |
| background-repeat | Устанавливает, как будет повторяться фоновое изображение |