background
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Сокращённое CSS свойство background
устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.
Интерактивный пример
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение..
Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: background-clip
, background-color
, background-image
, background-origin
, background-position
, background-repeat
, background-size
, и background-attachment
.
Как и во всех сокращённых свойствах, любые пропущенные вложенные значения будут установлены в свои изначальные значения.
Синтаксис
/* Использование свойства <background-color> */
background: green;
/* Использование свойств <bg-image> и <repeat-style> */
background: url("test.jpg") repeat-y;
/* Использование <box> и <background-color> */
background: border-box red;
/* Одно изображение, центрированное и масштабированное */
background: no-repeat center/80% url("../img/image.png");
Примечание: background-color
можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.
Значения
Свойству можно указывать одно или более значений из данного списка в любом порядке:
<attachment>
-
Смотри
background-attachment
<box>
-
Смотри
background-clip
<background-color>
-
Смотри
background-color
<bg-image>
-
Смотри
background-image
<position>
-
Смотри
background-position
<repeat-style>
-
Смотри
background-repeat
<bg-size>
-
Смотри
background-size
. Это свойство должно быть указано после <position>, разделённого символом '/'.
Формальный синтаксис
background =
<bg-layer>#? , <final-bg-layer>
<bg-layer> =
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<visual-box> ||
<visual-box>
<final-bg-layer> =
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<visual-box> ||
<visual-box> ||
<'background-color'>
<bg-image> =
<image> |
none
<bg-position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]
<bg-size> =
[ <length-percentage [0,∞]> | auto ]{1,2} |
cover |
contain
<repeat-style> =
repeat-x |
repeat-y |
[ repeat | space | round | no-repeat ]{1,2}
<attachment> =
scroll |
fixed |
local
<visual-box> =
content-box |
padding-box |
border-box
<background-color> =
<color>
<image> =
<url> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Примеры
HTML
<p class="topbanner">
Starry sky<br />
Twinkle twinkle<br />
Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>
CSS
.warning {
background: red;
}
.topbanner {
background: url("star-solid.gif") #00d repeat-y fixed;
}
Результат
Спецификации
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-background |
{cssinfo}}
Совместимость с браузерами
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background | ||||||||||||
SVG image as background | ||||||||||||
Values of background-clip longhand | ||||||||||||
Values of background-origin longhand | ||||||||||||
Values of background-size longhand | ||||||||||||
Multiple backgrounds |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support