背景颜色background-color
属性值表示法：十六进制、rgb()、rgba()
padding有背景颜色
背景图片background-image
background-image: ur1(images/bg1.jpg);
路径：相对路径、http:/开头的绝对路径
若外链样式表，则用相对CSS文件的图片路径
重复模式background-repeat
| 属性 | 意义 |
|---|---|
| repeat; | x,y均平铺（默认） |
| repeat-x; | x平铺 |
| repeat-y; | y平铺 |
| no-repeat; | 不平铺 |
尺寸background-size
属性值单位：px、百分数
background-size：100px 200px；
特殊的属性值：
contain：智能改变尺寸以容纳到盒子里
cover：智能改变尺寸以撑满盒子
auto：等比例设置
裁切background-clip
设置元素的背景裁切到哪个盒子。兼容到IE9。
| 值 | 意义 |
|---|---|
| border-box | 背景延伸至边框（默认值） |
| padding-box | 背景延伸至内边（padding） |
| content-box | 背景被裁剪至内容区 |
起源background-origin
规定 background-position 属性相对于什么位置来定位
| 值 | 意义 |
|---|---|
| border-box | 背景图像相对于边框盒来定位 |
| padding-box | 背景图像相对于内边距框来定位 |
| content-box | 背景图像相对于内容框来定位 |
固定background-attachment
决定背景图像的位置是在视口内固定/随着包含它的区块滚动
| 值 | 意义 |
|---|---|
| fixed | 自己滚动条不动，外部滚动条不动 |
| local | 自己滚动条动，外部滚动条动 |
| scroll | 自己滚动条不动，外部滚动条动（默认值） |
位置background-position
设置背景图片出现在盒子的什么位置
background-position：100px 200px；
用top、bottom、center、left、right描述图片出现的位置
例：水平竖直均居中
`background-position: center center;`
CSS精灵图/雪碧图
多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，
优点：减少HTTP请求数，加快网页显示速度
缺点：不方便测量、改动麻烦
background综合
在一个声明中设置所有的背景属性
背景渐变
线性渐变linear-gradient（）
background-image: linear-gradient(to right, blue, red);
/* 渐变方向、开始颜色、结束颜色 */
可有多个颜色值，且可用百分数定义位置
linear-gradient(to bottom, blue, yellow 20%, red);
径向渐变radial-gradient（）
background-image: radial-gradient(50% 50%, blue, red);
/* 圆心坐标、开始颜色、结束颜色 */
附加：浏览器私有前缀
不同浏览器有不同私有前缀，用来对试验性质的CSS属性加以标识
| 品牌 | 前缀 |
|---|---|
| Chrome | -webkit- |
| Firefox | -moz- |
| IE、Edge | -ms- |
| 欧朋 | -o- |
