Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

The background CSS shorthand property assigns explicit given values and sets missing properties to their initial values.

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Процентыкак и у каждого из подсвойств этого свойства:
  • background-position: относятся к размеру области позиционирования фона минус размер фонового изображения; размер - ширина горизонтальных смещений и высота вертикальных
  • background-size: относительно области позиционирования фона
Отображениевизуальный
Обработка значениякак и у каждого из подсвойств этого свойства:
  • background-image: как указано, но с абсолютными значениями url
  • background-position: список, каждый элемент которого состоит из двух ключевых слов, представляющих начало координат и два смещения от этого начала, каждое из которых задаётся абсолютной длиной (если дано length), иначе как проценты
  • background-size: как указано, но с относительной длиной, конвертируемой в абсолютные длины
  • background-repeat: список, каждый элемент которого содержит 2 ключевых слова, по одному на размер
  • background-origin: как указано
  • background-clip: как указано
  • background-attachment: как указано
  • background-color: вычисленный цвет
Animation typeкак и у каждого из подсвойств этого свойства:
Канонический порядокпорядок появления в формальной грамматике значений

Синтаксис

/* Использование свойства <background-color> */
background: green;

/* Использование свойств <bg-image> и <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");
Предупреждение: The background-color can only be defined on the last background, as there is only one background color for the whole element.

Значения

Свойству можно указывать одно или более значений из данного списка в любом порядке:

<attachment>
See background-attachment
<box>
See background-clip
<background-color>
See background-color
<bg-image>
See background-image
<position>
See background-position
<repeat-style>
See background-repeat
<bg-size>
See background-size. This property must be specified after <position>, separated with the '/' character.

Формальный синтаксис

[ <bg-layer> , ]* <final-bg-layer>

где
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

где
<bg-image> = none | <image>
<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> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<attachment> = scroll | fixed | local
<box> = border-box | padding-box | content-box

где
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>

где
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

где
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

где
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?

Примеры

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("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; 
}

Результат

Спецификации

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 3
Определение 'background' в этой спецификации.
Кандидат в рекомендации Поддержка мультифонов и свойств background-size, background-origin и background-clip.
CSS Level 2 (Revision 1)
Определение 'background' в этой спецификации.
Рекомендация Нет значительных изменений
CSS Level 1
Определение 'background' в этой спецификации.
Рекомендация Первоначальное определение

Совместимость с браузерами

 

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 2Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 5Safari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка Да
Multiple backgroundsChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 3.6IE Полная поддержка 9Opera Полная поддержка 10.5Safari Полная поддержка 1.3WebView Android Полная поддержка 2Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android ? Safari iOS Полная поддержка 3.2Samsung Internet Android Полная поддержка Да
SVG image as backgroundChrome Полная поддержка 31Edge Полная поддержка 12Firefox Полная поддержка 9IE Полная поддержка 9Opera Полная поддержка 21Safari Полная поддержка 5.1WebView Android Полная поддержка 3Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 4.2Samsung Internet Android ?
Values of background-size longhandChrome Полная поддержка 21Edge Полная поддержка 12Firefox Полная поддержка 9IE Полная поддержка 9Opera Полная поддержка 21Safari Полная поддержка 5.1WebView Android Полная поддержка 3Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 18Opera Android Полная поддержка ДаSafari iOS Полная поддержка 4Samsung Internet Android Полная поддержка Да
Values of background-origin longhandChrome Полная поддержка 21Edge Полная поддержка 12Firefox Полная поддержка 22IE Полная поддержка 9Opera Полная поддержка 21Safari Полная поддержка 5.1WebView Android Полная поддержка 3Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 22Opera Android Нет поддержки НетSafari iOS Полная поддержка 4Samsung Internet Android ?
Values of background-clip longhandChrome Полная поддержка 21Edge Полная поддержка 12Firefox Полная поддержка 22IE Полная поддержка 9Opera Полная поддержка 21Safari Полная поддержка 5.1WebView Android Полная поддержка 3Chrome Android ? Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 22Opera Android Нет поддержки НетSafari iOS Полная поддержка 4Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

 

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: fscholz, andreww2012
Обновлялась последний раз: fscholz,