CSS Backgrounds - Фон
Свойства фона CSS используются для определения фоновых эффектов для элементов.
Свойства фона CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Цвет фона
Свойство background-color задает цвет фона элемента.
Цвет фона страницы задается так:
Пример
body {
background-color: lightblue;
}
С помощью CSS цвет чаще всего задается:
- a valid color name - like "red"
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
Посмотрите на значения цвета CSS для полного списка возможных значений цвета.
В приведенном ниже примере элементы <H1>, <p> и <div> имеют разные цвета фона:
Пример
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
Фоновое изображение
Свойство background-image указывает изображение, используемое в качестве фона элемента.
По умолчанию изображение повторяется так, чтобы оно охватывало весь элемент.
Фоновое изображение для страницы можно задать так:
Пример
body {
background-image: url("paper.gif");
}
Ниже приведен пример плохого сочетания текста и фонового изображения. Текст вряд ли читается:
Пример
body {
background-image: url("bgdesert.jpg");
}
Примечание: При использовании фонового изображения используйте изображение, которое не нарушает текст.
Фоновое изображение-повторить горизонтально или вертикально
По умолчанию свойство background-image повторяет изображение как по горизонтали, так и по вертикали.
Некоторые изображения должны повторяться только по горизонтали или вертикали, или они будут выглядеть странно, как это:
Пример
body
{
background-image: url("gradient_bg.png");
}
Если изображение выше повторяется только горизонтально ( background-repeat: repeat-x; ), фон будет выглядеть лучше:
Пример
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Совет: Чтобы повторить изображение вертикально, установите background-repeat: repeat-y;
Фоновое изображение-установить положение и не повторять
Отображение фонового изображения только один раз также задается свойством background-repeat:
Пример
body
{
background-image: url("img_tree.png");
background-repeat: no-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:
Пример
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
При использовании сокращенного свойства порядок значений свойств:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Это не имеет значения, если одно из значений свойства отсутствует, до тех пор, пока другие из них в этом порядке.
Все свойства фона CSS
| Свойство | Описание |
|---|---|
| background | Задает все свойства фона в одном объявлении |
| background-attachment | Устанавливает, является ли фоновое изображение фиксированным или прокручивается с остальной частью страницы | >
| background-color | Задает цвет фона элемента |
| background-image | Задает фоновое изображение для элемента |
| background-position | Задает начальное положение фонового изображения |
| background-repeat | Устанавливает, как фоновое изображение будет повторяться |