介绍：
- background-size用于设置背景图片的尺寸，可以是具体长度值、百分比或cover、contain等关键字；
- background-repeat用于指定背景图片的平铺方式，包括repeat、repeat-x、repeat-y和no-repeat；
- background-position用于设置背景图片的起始位置，可以使用关键字（如top、center）或具体的长度值。这三种属性共同用于控制背景图片的显示效果，通过灵活组合可以实现各种各样的视觉效果。
起始代码：
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
//给div设置宽高和红色边框便于观察
div{
width: 600px;
height: 300px;
border: 5px solid red;
}
.example {
background-image: url('../image/赛博冷色.png');
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>起始结果：
我们可以看到由于div设置了宽高属性所以背景图片只显示了左上角。
1. background-size
可能的取值：
auto：默认值，保持图片原始尺寸。<length>：指定图片的宽度和高度，可以是像素值或百分比。cover：等比例缩放图片，使其完全覆盖容器，并保持图片的纵横比。contain：等比例缩放图片，使其完全包含在容器内，并保持图片的纵横比。
特点和实例：
auto：保持图片原始尺寸，不进行缩放。
arduino
.example {
background-size: auto;
}结果：背景图片只显示了左上角。
<length>：设置图片的宽度和高度，可以使用像素值或百分比。
arduino
.example {
background-size: 200px 100px;
}结果：因为给背景图设置了200px 100px的宽高，所以背景图会自己填充剩下的div空间
cover：等比例缩放图片，使其完全覆盖容器，并保持图片的纵横比。
arduino
.example {
background-size: cover;
}结果：背景图完全覆盖容器，并保持图片的纵横比。
contain：等比例缩放图片，使其完全包含在容器内，并保持图片的纵横比。
arduino
.example {
background-size: contain;
}结果：因为等比例填充div容器，所以可以看到剩下的空间也是被图片继续覆盖掉。
2. background-repeat
可能的取值：
repeat：在水平和垂直方向上平铺图片，默认值。repeat-x：在水平方向上平铺图片。repeat-y：在垂直方向上平铺图片。no-repeat：不平铺，只显示一次图片。
特点和实例：
repeat：在水平和垂直方向上平铺图片，默认值。
css
.example {
background-repeat: repeat;
}结果：为默认值，所以背景图结果也为起始结果（最开始的背景图展示）
repeat-x：在水平方向上平铺图片。
arduino
.example {
background-size: 200px 100px;//方便展示图片的方向平铺结果
background-repeat: repeat-x;
}结果：可以看到图片平铺在x轴（即水平方向上）
repeat-y：在垂直方向上平铺图片。
arduino
.example {
background-size: 200px 100px;//方便展示图片的方向平铺结果
background-repeat: repeat-y;
}结果：可以看到图片平铺在y轴（即垂直方向上）
no-repeat：不平铺，只显示一次图片。
arduino
.example {
background-size: 200px 100px;//方便展示图片的方向平铺结果
background-repeat: no-repeat;
}结果：可以看到图片只平铺一次）
3. background-position
可能的取值：
-
<position>：用长度值、百分比值或关键字来描述背景图片的位置。- 关键字：top、bottom、left、right、center。
特点和实例：
<position>：使用长度值、百分比值或关键字来描述背景图片的位置。
css
.example {
background-image: url('../image/赛博冷色.png');
background-repeat: no-repeat;
background-size: 200px 100px;
//以上三样式便于观察背景图所设置
background-position: 10px 20px;
}结果：表示距离左边距10px，上边距20px
- 关键字：使用关键字来描述背景图片的位置。
css
.example {
background-image: url('../image/赛博冷色.png');
background-repeat: no-repeat;
background-size: 200px 100px;
//以上三样式便于观察背景图所设置
background-position: top center;
}结果：表示位于顶部居中位置，其他同理。
希望这篇文章能够帮助到大家，如有错误也欢迎大家补充！