1.背景图大小(background-size)
- 这个属性设置单张背景图的大小，默认是原图的大小
- 当同时指定宽高时，会造成图片失真，如果要保持宽高比，可以使用 auto 字段让宽或者高自适应
| 值类型 |
示例 |
说明 |
| 像素 |
50px 50px |
- |
| 百分比 |
50% 50% |
这个比例是基本容器本身，而不是原图大小 |
| 关键字 |
contain |
背景图自适应容器大小(显示一张完整的图片) |
| 关键字 |
cover |
背景图自适应容器大小（图片完全将容器填满） |
| 关键字 |
auto |
自适应，保持宽度宽高比 |
2.背景重复(background-repeat)
- 如果背景图小于容器，那么容器在容纳一张背景图之后，还会有剩余的空间，默认情况下会将图片重复直至铺满整个容器
- 也可以使用这个属性进行其他控制，他有几个值：
| 值 |
说明 |
| repeat |
（默认）将图片重复直至铺满整个容器，包含水平和垂直方向 |
| repeat-x |
同 repeat，但只在水平方向重复 |
| repeat-y |
同 repeat，但只在垂直方向重复 |
| no-repeat |
不重复，只显示一张图片 |
| round |
重复，且保证每张图片的完整型 ，剩下的不够一张图片的空间会被均分到其他图片中 |
| space |
重复，且保证每张图片的完整型，剩下的不够一张图片的空间会均分成间隔 |
- 如果背景图大小设定成了 cover/contain 则此background-repeat属性失效
3.背景图显示区域(background-clip)
- 默认情况下，元素的border，padding，centent区域都是可以显示背景图的，css3添加了这个属性，可以设定背景图的显示区域，这个属性有3个值：
| 值 |
说明 |
| border-box |
（默认）容器border，padding，centent区域都可以显示背景图 |
| padding-box |
只在padding + content区域的显示背景图 |
| content-box |
只在content区域显示背景图 |
- 注意：这个属性对于background-color也是有效的！
4.绘制原点(background-origin)
| 值 |
说明 |
| border-box |
从边框开始绘制 |
| padding-box |
（默认）从padding开始绘制 |
| content-box |
从content开始绘制 |
5.背景图片位置(background-position)
- 默认背景图的位置是左上角(background-origin)，这个属性允许用户设置水平方向和垂直方向的偏移量，从而控制背景图片的位置
| 值类型 |
示例 |
说明 |
| 像素 |
10px 20px |
代表向右偏移10px，向下偏移20px |
| 百分比 |
50% 50% |
百分比是基于空白的区域的大小 ，而不是整个容器的大小，设50%表示居中 |
| 关键字 |
left / right / center / top / bottom |
left top代表左上角 |
6.背景固定(background-attachment)
- 这个属性适用于容器出现滚动条的时候，它控制当用户拖动滚动条时，背景图如何展示
| 值 |
说明 |
| scroll |
(默认) 追随系统的滚动条（body的滚动条）的滚动而滚动 ，用于body元素 |
| fixed |
背景图像固定不动，用于body元素 |
| local |
追随当前元素的滚动条的滚动而滚动，常用于普通div元素 |
7.简写
- background可以将多个背景属性写在一起，但是不包含 background-size ,个人的测试表明，属性的顺序除特殊情况外是可以随意
background: no-repeat url(./imgs/e-plus.png);
//等价于
background: url(./imgs/e-plus.png) no-repeat;
- 注意点：background-clip和background-origin，他们值是相似的(border-box,padding-box,content-box)，如果只写了一个类似的值，则视为background-origin和background-clip都是这个值，如果写了2个值，则第一个值对应background-origin，第二个值对应background-clip
