1. 背景颜色
背景颜色不会影响盒子大小，一般在布局中会先给盒子设置背景颜色，这样能够看清盒子的大小和位置
属性名：background-color（bgc）
属性值：颜色取值可以用关键字、rgb 表示法、十六进制等
背景颜色默认值是透明：rgba(0,0,0,0)、transparent
2. 背景图片
背景图片类似于背景颜色，只是给盒子起到装饰效果，是不能撑开盒子的
属性名：background-image（bgi）
属性值：background-image:url('图片路径')
背景图片 url 中可以省略引号，图片默认是在水平和垂直方向平铺的
3. 背景平铺
属性名：background-repeat(bgr)
属性值：
- repeat ：水平和垂直方向都平铺（默认值）
- no-repeat ：不平铺
- repeat-x ：沿水平方向平铺（x轴）
- repeat-y ：沿垂直方向平铺（y轴）
4. 背景位置
属性名：background-position(bgp)
属性值：background-position ：水平方向位置 垂直方向位置
属性值可以用方位名词表示，也可以用坐标表示，方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直
（1）方位名词最多只能表示 9 个位置，水平方向：left、center、right；垂直方向：top、center、bottom
（2）坐标：数字 + px --- 坐标系：原点（0，0），盒子的左上角（一般将图片左上角与坐标点重合即可）；x轴，水平向右；y轴，垂直向下。
5. 背景相关属性连写
属性名是background(bg)，单个属性的合写，各取值之间用空格隔开
背景属性连写没有顺序之分，推荐书写顺序：background: color image repeat position
可以按照需求省略，在 PC 端，如果盒子大小和背景图片大小一样，则可以直接写为background:url()
如果要设置单独的样式和连写，可以把单独的样式写在连写下面，也可以把单独的样式写在连写的里面。
6. img 标签和背景图片的区别
在网页中展示图片效果，有两种方式：
（1）直接使用 img 标签，如果不设置宽高默认会以原尺寸显示
（2）div 标签 + 背景图片，要设置 div 的宽高，不设置图片显示不出来，因为背景图片只是起装饰作用的 CCS 样式，并不能撑开 div 盒子。重要的背景图，建议使用 img 标签。
