background

background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。

尝试一下

此属性是一个简写属性，可以在一次声明中定义一个或多个属性：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 属性被指定多个背景层时，使用逗号分隔每个背景层。

每一层的语法如下：

在每一层中，下列的值可以出现 0 次或 1 次：
<bg-size> 只能紧接着 <position> 出现，以"/"分割，如： "center/80%".
<box> 可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设定 background-origin 和 background-clip。如果出现 2 次，第一次的出现设置 background-origin，第二次的出现设置 background-clip。
<background-color> 只能被包含在最后一层。

备注： background-color 只能在 background 的最后一个属性上定义，因为整个元素只有一种背景颜色。

值

下面的一个或多个值，可以按任意顺序放置：

"><attachment>: 参见 background-attachment
"><box>: 参见 background-clip 和 background-origin
"><background-color>: 参见 background-color
"><bg-image>: 参见 background-image
"><position>: 参见 background-position
"><repeat-style>: 参见 background-repeat
"><bg-size>: 参见 background-size。

标准语法

background = 
  [ <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> = 
  <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   

<box> = 
  border-box   |
  padding-box  |
  content-box  

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  url( <string> <url-modifier>* )  |
  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>

CSS

.warning {
  background: red;
}

.topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}

结果

规范

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

浏览器兼容性

BCD tables only load in the browser