Эта страница была переведена с английского языка силами сообщества. Вы тоже можете внести свой вклад, присоединившись к русскоязычному сообществу MDN Web Docs.

background

Интерактивный пример

Сокращённое 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 = 
  [ (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)
  <image()>       | (en-US)
  <image-set()>   | (en-US)
  <cross-fade()>  | (en-US)
  <element()>     | (en-US)
  <gradient>      

<length-percentage> = 
  <length>      | (en-US)
  <percentage>  

<image()> = 
  image( <image-tags>? (en-US) [ (en-US) <image-src>? (en-US) , <color>? (en-US) ]! )  

<image-set()> = 
  image-set( <image-set-option># (en-US) )  

<cross-fade()> = 
  cross-fade( <cf-image># (en-US) )  

<element()> = 
  element( <id-selector> )  

<gradient> = 
  <linear-gradient()>            | (en-US)
  <repeating-linear-gradient()> (en-US)  | (en-US)
  <radial-gradient()>            | (en-US)
  <repeating-radial-gradient()> (en-US)  

<image-tags> = 
  ltr  | (en-US)
  rtl  

<image-src> = 
  <url>     | (en-US)
  <string> (en-US)  

<color> = 
  <absolute-color-base>  | (en-US)
  currentcolor           | (en-US)
  <system-color>         | (en-US)
  <device-cmyk()>        

<image-set-option> = 
  [ (en-US) <image> | (en-US) <string> (en-US) ] (en-US) [ (en-US) <resolution> (en-US) || (en-US) type( <string> (en-US) ) ] (en-US)  

<cf-image> = 
  <percentage>? (en-US)          && (en-US)
  [ (en-US) <image> | (en-US) <color> ] (en-US)  

<id-selector> = 
  <hash-token>  

<linear-gradient()> = 
  linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )  

<radial-gradient()> = 
  radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> ] (en-US)? (en-US) , <color-stop-list> )  

<absolute-color-base> = 
  <hex-color> (en-US)    | (en-US)
  <named-color>  | (en-US)
  transparent    | (en-US)
  <rgb()>        | (en-US)
  <rgba()>       | (en-US)
  <hsl()>        | (en-US)
  <hsla()>       | (en-US)
  <hwb()>        | (en-US)
  <lab()>        | (en-US)
  <lch()>        | (en-US)
  <oklab()>      | (en-US)
  <oklch()>      | (en-US)
  <color()>      

<device-cmyk()> = 
  device-cmyk( <cmyk-component>{4} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) )  

<side-or-corner> = 
  [ (en-US) left | (en-US) right ] (en-US)  || (en-US)
  [ (en-US) top | (en-US) bottom ] (en-US)  

<color-stop-list> = 
  <linear-color-stop> , [ (en-US) <linear-color-hint>? (en-US) , <linear-color-stop> ] (en-US)# (en-US)  

<position> = 
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) start | (en-US) end | (en-US) <length-percentage> ] (en-US)  | (en-US)
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) x-start | (en-US) x-end | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) y-start | (en-US) y-end | (en-US) <length-percentage> ] (en-US)  | (en-US)
  [ (en-US) center | (en-US) [ (en-US) left | (en-US) right | (en-US) x-start | (en-US) x-end ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom | (en-US) y-start | (en-US) y-end ] (en-US) <length-percentage>? (en-US) ] (en-US)  | (en-US)
  [ (en-US) center | (en-US) [ (en-US) start | (en-US) end ] (en-US) <length-percentage>? (en-US) ] (en-US) [ (en-US) center | (en-US) [ (en-US) start | (en-US) end ] (en-US) <length-percentage>? (en-US) ] (en-US)  

<rgb()> = 
  rgb( [ (en-US) <percentage> | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  | (en-US)
  rgb( [ (en-US) <number> | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<hsl()> = 
  hsl( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<hwb()> = 
  hwb( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<lab()> = 
  lab( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<lch()> = 
  lch( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<oklab()> = 
  oklab( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<oklch()> = 
  oklch( [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <percentage> | (en-US) <number> | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<color()> = 
  color( <colorspace-params> [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<cmyk-component> = 
  <number>      | (en-US)
  <percentage>  

<alpha-value> = 
  <number>      | (en-US)
  <percentage>  

<linear-color-stop> = 
  <color>               && (en-US)
  <length-percentage>? (en-US)  

<linear-color-hint> = 
  <length-percentage>  

<hue> = 
  <number>  | (en-US)
  <angle>   | (en-US)
  none      

<colorspace-params> = 
  <predefined-rgb-params>  | (en-US)
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ (en-US) <number> | (en-US) <percentage> | (en-US) none ] (en-US){3} (en-US)  

<xyz-params> = 
  <xyz-space> [ (en-US) <number> | (en-US) none ] (en-US){3} (en-US)  

<predefined-rgb> = 
  srgb          | (en-US)
  srgb-linear   | (en-US)
  display-p3    | (en-US)
  a98-rgb       | (en-US)
  prophoto-rgb  | (en-US)
  rec2020       

<xyz-space> = 
  xyz      | (en-US)
  xyz-d50  | (en-US)
  xyz-d65

Примеры

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;
}

Результат

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

Specification
CSS Backgrounds and Borders Module Level 4
# the-background

{cssinfo}}

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

BCD tables only load in the browser

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