✨1. background-color 属性定义了元素的背景颜色
- 语法：
background-color: 颜色值
- 一般情况下元素颜色默认值是
transparent （透明），我们也可以手动指定背景颜色为透明色
/* background-color 示例 */
background-color: transparent;
✨2. background-image 属性描述了元素的背景图像
实际开发常见于logo或一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）
- 语法：
background-image: none | url("url")
background-image 属性的参数值：
| 参数值 | 作用 |
|---|
none | 无背景图（默认的） |
url | 使用绝对或相对地址指定背景图像 |
✨3.background-repeat 属性决定背景是否平铺
background-repeat 属性决定在HTML页面上是否对背景图像进行平铺- 语法：
background-repeat: repeat / no-repeat /repeat-x /repeat-y
background-repeat 属性的参数值：
| 参数值 | 作用 |
|---|
repeat | 背景图像在纵向和横向上平铺（默认的） |
no-repeat | 背景图像不平铺 |
repeat-x | 背景图像在横向上平铺 |
repeat-y | 背景图像在纵向平铺 |
✨4.background-position属性可改变图片在背景的位置
- 语法：
background-position：x y;
- x,y分别表示的是x坐标和y坐标，可用方位名词或精确单位表示
background-position属性的参数值：
| 参数值 | 说明 |
|---|
length | 百分数、由浮点数、数字和单位标识符组成的长度值 |
position | top、center、bottom、left、center、right 方位名词 |
！！！注意：
💡1. 参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如l
eft top和top left效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二值默认居中对齐
💡2. 参数是精确单位
- 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
- 如果只指定一个数值，那该数值一定是x坐标，另一个值默认垂直居中
💡3. 参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
案例：
<style>
div {
width: 500px;
height: 500px;
background-image: url("2.jpg");
background-repeat: no-repeat;
border: 2px solid blueviolet;
background-position: 200px top;
}
</style>
</head>
<body>
<div></div>
</body>
