一、背景颜色
属性名：background-color 颜色取值：关键字、rgb表示法、rgba表示法、十六进制表示法...... 注意： 背景颜色默认值是透明：rgba(0,0,0,0)、transparent 背景颜色不会影响盒子大小，并且还能看清盒子大小和位置，开发时可设置背景颜色来开发盒子模型。
background-color: red;
二、背景图片
属性名：background-image 属性值：background-image: url('图片路径')
background-image: url(../img/123.jpg);
背景图片大小设置
- 语法：background-size:宽度 高度；
- 作用：设置背景图片大小
- 取值：
| 取值 | 场景 |
|---|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相当于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子的最大 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 |
-
1.设置一个盒子赋予宽（400px）高（300px），并设置边框便于观察，将原图插入盒子中
-
2.第一种取值（数字+px）：
- 使用数字＋px 给图片设置和盒子一样的宽高
- background-size: 400px 300px;
-
3.第二种取值（百分比）：
- 使用百分比给图片设置宽高都为90%
- background-size: 90% 90%;
-
4.第三种取值（contain）：
- 使用 contain 将背景图片等比例缩放，直到不会超出盒子的最大
- background-size: contain;
-
5.第四种取值（cover）：
- 使用 cover 将背景图片等比例缩放，直到刚好填满整个盒子没有空白
- background-size: cover;
三、背景平铺
属性名：background-repeat
| 取值 | 效果 |
|---|---|
| repeat | （默认值）水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向（x轴） 平铺 |
| repeat-y | 沿着垂直方向（y轴） 平铺 |
background-repeat: no-repeat;
四、背景位置
background-position: center center;
background-position: 200px 200px;
背景属性 复合属性
background:背景色 url("图像")平铺 定位 固定；
