背景

此属性是以下 CSS 属性的简写

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <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");

/* Global values */
background: inherit;
background: initial;
background: revert;
background: revert-layer;
background: unset;

background 属性指定为一个或多个背景层，用逗号分隔。

每一层的语法如下

• 每一层可以包含以下值的零个或一个实例
  • <attachment>
  • <bg-image>
  • <position>
  • <bg-size>
  • <repeat-style>
• <bg-size> 值只能包含在 <position> 之后，用 '/' 字符分隔，如下所示："center/80%"。
• <box> 值可以包含零次、一次或两次。如果包含一次，则设置 background-origin 和 background-clip。如果包含两次，则第一个实例设置 background-origin，第二个实例设置 background-clip。
• <background-color> 值只能包含在指定的最后一层中。

<attachment>

参见 background-attachment。默认值：scroll。

<box>

参见 background-clip 和 background-origin。默认值：分别为 border-box 和 padding-box。

<background-color>

参见 background-color。默认值：transparent。

<bg-image>

参见 background-image。默认值：none。

<position>

参见 background-position。默认值：0% 0%。

<repeat-style>

参见 background-repeat。默认值：repeat。

<bg-size>

参见 background-size。默认值：auto。

以下三行 CSS 等效

background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

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>* )  

浏览器不会向辅助技术提供任何关于背景图像的特殊信息。这主要对屏幕阅读器很重要，因为屏幕阅读器不会宣布其存在，因此不会向其用户传达任何信息。如果图像包含理解页面总体目的的关键信息，最好在文档中以语义方式描述它。

• MDN 理解 WCAG，指南 1.1 说明
• 理解成功标准 1.1.1 | W3C 理解 WCAG 2.0

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

.topbanner {
  background: url("starsolid.gif") #99f repeat-y fixed;
}

结果

• box-decoration-break
• 使用渐变
• 使用多个背景