1、背景颜色
background-color:属性设置标签的背景颜色
2、背景图片
background-image: url();
2-1、 如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
2-2、如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
3、背景平铺
background-repeat：取值有repeat（默认）、no-repeat、repeat-x、repeat-y
应用场景:
可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
4、背景定位
background-position:水平方向 垂直方向
取值：
（1）单词：水平方向: left center right 垂直方向: top center bottom
（2）像素（注意像素可为负数）
应用场景：电脑的分辨率有很多种，当图片比较大的时候, 可以通过定位属性（例：background-position:center top）保证图片永远居中显示
5、背景关联
background-attachment:
scroll 默认值， 会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动
默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么就可以修改背景图片和滚动条的关联方式
注意：当元素滚出了屏幕，背景图片也会消失
6、背景属性连写
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
注意点：background属性中， 任何一个属性都可以被省略，顺序也可以随便
7、插入图片和背景图片的区别
（1）插入图片会占用位置
（2）插入图片没有定位属性, 所以控制图片的位置不太方便
（3）插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片，像那些
电商网站要进行产品展示的图片一个是插入图片，因为需要做一个动画效果
8、背景色渐变：
background:linear-gradient():兼容性问题严重，**需要添加浏览器私有前缀**
格式：
（1）background:linear-gradient(渐变的起始位置，起始颜色，结束颜色);
**栗子：background: `-webkit-`linear-gradient(top, red ，yellow);**
（2）background:linear-gradient(渐变的起始位置，颜色 位置，颜色 位置...);
**栗子：background:-o-linear-gradient(top, red 0%, blue 30%, yellow 100%);**
用法，经验
（1）如果一张图片上还有其他图片，一般都是用div嵌套div（里面的div的宽高应当和最外面的div的宽高一样，这样才便于调整），然后在div中设置背景图片，再调整位置。
css精灵图
作用：可以减少请求的次数, 以及可以降低服务器处理压力
CSS的精灵图需要配合背景图片和背景定位来使用