这一节梳理下 background 属性的完整知识点。

部分 CSS3 中才添加的相关配置会有注明。

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

4-1.background-color

该属性用来声明背景色。

该属性与属性 background-image 并不冲突：

.demo1 {
  width: 300px;
  height: 400px;
  background-color: skyblue;
  background-image: url('./images/tree.gif');
}

4-2.background-image

该属性用来声明背景图片。

background-image: url('');

4-3.background-position

该属性用来声明背景位置。

其声明方式有以下几种：

1. left top right bottom

通常要声明水平方向和垂直方向的两个值，譬如：

background-position: left top;

如果只声明了一个值，另一个值将会是默认值 center。

2. x% y%

该百分比相对的是背景盒子的宽度和高度。

如果只声明了一个值，另一个值将会是默认值 50%。默认值是 0% 0%。

3. xpos ypos

带有具体 css 长度单位的声明方式。譬如：

background-position: 20px 40px;

如果只声明了一个值，另一个值将会是默认值 center。

4-4.background-size

该属性用来声明背景图片的尺寸大小。

有以下值：

1. auto

默认值。图片本身的尺寸大小。

2. length

第一个值声明图片宽度，第二个值声明图片高度。

如果只声明了一个值，另一个值将会是默认值 auto。

background-size: 200px 100px;

3. percentage

该百分比形式相对于背景盒子的宽度和高度。

4. cover

cover 意为铺满覆盖。

图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被裁掉。

5. contain

contain 意为包含。

图片自身的宽高比不变，缩放至整个图片自身能完全显示出来，所以容器会有留白区域。

图片虽然缩放了，但是整个图是被包含在里面了，完整显示，不能裁剪。

4-5.background-repeat

该属性声明背景图片的重复排列方式。

1. repeat

默认值。图片水平重复、垂直重复。

2. repeat-x

图片水平重复。

3. repeat-y

图片垂直重复。

4. no-repeat

图片不重复排列。

5. space

类似于 flex 布局中的 space-between。

6. round

平铺。

4-6.background-origin

该属性声明背景图片的起始点。

该属性共有以下值：

1. padding-box: 默认值。背景图片开始于 padding-box 的左上角。
2. border-box: 背景图片开始于 border-box 的左上角。
3. content-box: 背景图片开始于 content-box 的左上角。

4-7.background-clip

该属性声明背景图片的剪切填充区域。

该属性会影响 background-color 与 background-image。

1. border-box: 默认值。背景在 border-box 内部剪切填充。
2. padding-box: 背景在 padding-box 内部剪切填充。
3. content-box: 背景在 content-box 内部剪切填充。

4-8.background-attachment

该属性声明背景图片是否跟随页面滚动。

1. scroll: 默认值。背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。
2. fixed: 背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
3. local: 背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。