background
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 =
[ (en-US) <bg-layer># (en-US) , ] (en-US)? (en-US) <final-bg-layer>
<bg-layer> =
<bg-image> || (en-US)
<bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US)
<repeat-style> || (en-US)
<attachment> || (en-US)
<box> || (en-US)
<box>
<final-bg-layer> =
<'background-color'> || (en-US)
<bg-image> || (en-US)
<bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US)
<repeat-style> || (en-US)
<attachment> || (en-US)
<box> || (en-US)
<box>
<bg-image> =
<image> | (en-US)
none
<bg-position> =
[ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage>? (en-US) ] (en-US)
<bg-size> =
[ (en-US) <length-percentage [0,∞]> (en-US) | (en-US) auto ] (en-US){1,2} (en-US) | (en-US)
cover | (en-US)
contain
<repeat-style> =
repeat-x | (en-US)
repeat-y | (en-US)
[ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){1,2} (en-US)
<attachment> =
scroll | (en-US)
fixed | (en-US)
local
<box> =
border-box | (en-US)
padding-box | (en-US)
content-box
<image> =
<url> | (en-US)
<gradient> (en-US)
<length-percentage> =
<length> | (en-US)
<percentage>
<url> =
url( <string> (en-US) <url-modifier>* (en-US) ) | (en-US)
src( <string> (en-US) <url-modifier>* (en-US) )
Примеры
HTML
<p class="topbanner">
Starry sky<br/>
Twinkle twinkle<br/>
Starry sky
</p>
<p class="warning">Here is a paragraph<p>
CSS
.warning {
background: red;
}
.topbanner {
background: url("starsolid.gif") #00D repeat-y fixed;
}
Результат
Спецификации
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-background |
{cssinfo}}
Совместимость с браузерами
BCD tables only load in the browser