CSS-фон — свойства, добавляющие фон для любого HTML-элемента. Каждый элемент имеет фоновый слой, который может быть прозрачным (по умолчанию), цветной заливкой и изображением. В качестве изображения может выступать градиент или картинка. Для одного элемента можно задать несколько фоновых изображений.
Фон не отображается у пустых элементов с нулевой высотой. Свойства фона не наследуются, но фон родительского блока всегда будет виден.
Фон не отображается у пустых элементов с нулевой высотой. Свойства фона не наследуются, но фон родительского блока всегда будет виден.
Цвет фона и фоновые изображения на веб-странице
- Содержание:
- 1. Цвет фона background-color
- 2. Фоновое изображение background-image
- 3. Повтор фоновых изображений background-repeat
- 4. Позиционирование фоновых изображений background-position
- 5. Фиксация изображения на месте background-attachment
- 6. Заполнение фоном отступов и границ элемента background-clip
- 7. Положение фонового изображения относительно его родительского блока background-origin
- 8. Размер изображения background-size
- 9. Задание фона элемента одним свойством background
- 10. Множественные фоны
1. Цвет фона background-color
Свойство устанавливает цветную заливку для любого HTML-элемента. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого. Не наследуется.
| background-color | |
|---|---|
| Значения: | |
| цвет | Цвет фона можно задать разными способами: HEX,RGB,RGBA, HSL,HSLA, а также с помощью 140 кроссбраузерных названий цветов. |
| transparent | Значение по умолчанию. Задает прозрачный фон для элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
div {background-color: papayawhip;}
h1 {background-color: palevioletred;}
p {background-color: peachpuff;}
span {background-color: peru;}
2. Фоновое изображение background-image
Свойство устанавливает изображение в качестве фона для элемента. Фоновым изображением может быть картинка или градиент, который задаётся с помощью функций background-image: linear-gradient(), background-image: radial-gradient() или с помощью функций повтора градиента background-image: repeating-linear-gradient(), background-image: repeating-radial-gradient(). Не наследуется.
| background-image | |
|---|---|
| Значения: | |
| url('URL') | Абсолютный или относительный адрес изображения. |
| none | Значение по умолчанию, также удаляет изображение у элемента из группы элементов, для которых установлено фоновое изображение. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
div {background-image: url(https://html5book.ru/images/flower.png);}
table {background-image: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8);}
p {background-image: linear-gradient(to top left, white, lightblue);}
3. Повтор фоновых изображений background-repeat
Свойство определяет, каким образом будет повторяться фоновый рисунок. Не наследуется.
| background-repeat | |
|---|---|
| Значения: | |
| repeat | Весь фон страницы будет заполнен фоновым рисунком. Если при этом задать background-position, то повтор будет осуществляться с указанной позиции. Значение по умолчанию. |
| no-repeat | Фоновое изображение не будет повторяться. |
| repeat-x | Фоновый рисунок повторяется от левого до правого края веб-страницы по верхнему краю страницы. |
| repeat-y | Фоновый рисунок повторяется от верхнего до нижнего края веб-страницы по левому краю страницы. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
div {background-repeat: no-repeat;}
div {background-repeat: repeat-x;}
div {background-repeat: repeat-y;}
div {background-repeat: repeat;}
4. Позиционирование фоновых изображений background-position
Свойство управляет точным расположением фонового изображения. Можно определить начальную позицию фонового изображения в виде горизонтальной и вертикальной координат посредством ключевых слов, точных абсолютных и процентных значений. Значение по умолчанию background-position: 0% 0%. Не наследуется.
| background-position | |
|---|---|
| Значения: | |
| left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom |
Позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов. Если задано одно ключевое слово, второе примет значение center. |
| px / em/ % | Указывается два значения, первое определяет расстояние между левой стороной изображения и левым краем элемента-контейнера (по горизонтали), второе значение указывает расстояние между верхней стороной изображения и верхним краем элемента-контейнера (по вертикали). Также можно использовать отрицательные значения для обрезки части изображения. Процентное значение рассчитывается относительно самого изображения и относительно элемента-контейнера, в котором оно расположено. Например, при задании background-position:50% 50%; центр изображения совпадет с центром элемента-контейнера. Одновременно можно комбинировать значения в px, em и %. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
div {background-position: center center;}
div {background-position: 50% 100%;}
div {background-position: left;}
div {background-position: 50px;}
Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:
div {
background-color: #FCF8F7;
height: 120px;
background-image: url(https://html5book.ru/images/flower112.png);
background-position: left bottom;
background-repeat: repeat-x;
}
Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:
div {
width: 660px;
background-color:#E0E4EF;
height: 300px;
background-image: url(https://html5book.ru/images/flower112.png), url(https://html5book.ru/images/leaf112.png), url(https://html5book.ru/images/flower221.png);
background-repeat: repeat-x;
background-position: 0 250px, 0 150px, 0 98px;
}
5. Фиксация изображения на месте background-attachment
Свойство позволяет фиксировать фоновое изображение при прокрутке страницы. Не наследуется.
| background-attachment | |
|---|---|
| Значения: | |
| scroll | Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию. |
| fixed | Предотвращает перемещение, фиксирует фоновое изображение на заднем плане. |
| local | Фоновое изображение прокручивается вместе с содержимым элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
div {background-attachment: scroll;}
div {background-attachment: fixed;}
div {background-attachment: local;}
6. Заполнение фоном отступов и границ элемента background-clip
Свойство определяет, будет ли цвет фона ограничиваться содержимым элемента или будет простираться до внешнего края границы border. Не наследуется.
| background-clip | |
|---|---|
| Значения: | |
| border-box | Фон простирается до внешнего края границы элемента. Значение по умолчанию. |
| padding-box | Фона простирается до внешнего края отступов элемента. |
| content-box | Фон окрашивает только содержимое элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
div {background-clip: border-box;}
div {background-clip: padding-box;}
div {background-clip: content-box;}
7. Положение фонового изображения относительно его родительского блока background-origin
Свойство определяет, где будет позиционироваться фоновое изображение. Если одновременно задано свойство background-attachment: fixed, эффекта не будет.
| background-origin | |
|---|---|
| Значения: | |
| padding-box | Положение элемента вычисляется относительно верхнего левого угла с внутренней стороны границы элемента. Значение по умолчанию. |
| border-box | Положение элемента вычисляется относительно верхнего левого угла с внешней стороны границы элемента. |
| content-box | Положение элемента вычисляется относительно верхнего левого угла содержимого. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
div {background-origin: padding-box;}
div {background-origin: border-box;}
div {background-origin: content-box;}
8. Размер изображения background-size
Свойство позволяет масштабировать фоновое изображение по вертикали и горизонтали (background-image). Оно описывает, как изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область. С помощью этого свойства изображение также можно уменьшать по ширине и по высоте. Не наследуется.
| background-size | |
|---|---|
| Значения: | |
| auto | Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам. |
| px / em /cm | Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em. |
| % | Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном. |
| cover | Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. |
| contain | Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
div {background-size: 300px 150px;}
div {background-size: 50% 30%;}
div {background-size: cover;}
div {background-size: contain;}
9. Задание фона элемента одним свойством background
Свойство позволяет описать в одном объявлении следующие свойства фона: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip и background-attachment. Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.
Если вы указываете в краткой записи фона свойство background-size, то его значения нужно будет записать через слеш /, чтобы отделить его от свойства background-position.
Синтаксис
body {
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
10. Множественные фоны
CSS3 предоставила еще одну полезную возможность — множественные фоны, которые можно задавать как для страницы целиком, так и для конкретного блока. Например:
div {
width: 680px;
height: 630px;
background-image: url(https://html5book.ru/wp-content/uploads/2015/02/flower_rose.png), url(https://html5book.ru/wp-content/uploads/2015/02/love.png), url(https://html5book.ru/wp-content/uploads/2015/02/border_white.png);
background-repeat: no-repeat;
background-position: bottom right, center center, top left;
}
Изображения нужно перечислять в порядке наложения, самое верхнее изображение должно быть первым, а самое большое, расположенное на заднем плане — последним.
Свежие комментарии