1.介绍
在HTML中，可以使用CSS来设置背景图的属性。使用background-image来添加背景图片，使用background-size来设置背景图片的大小。此外，还可以使用background-position来控制背景图的位置。
2.设置背景图
2.1 添加背景图片
要设置背景图片，需要使用CSS中的background-image属性。在使用该属性时需要指定背景图的路径，例如：
body {
background-image: url("example.png");
}
url()中的地址是相对于HTML文件的，可以是相对路径或绝对路径。
2.2 设置背景图片大小
要设置背景图片的大小可以使用CSS中的background-size属性，该属性有两个值：
cover：将图片等比例缩放到足够大，覆盖整个元素，可能会裁剪图片
contain：将图片等比例缩放到足够小，显示完整的图片，可能会出现空白区域
例如，可以将背景图片设置为cover：
body {
background-image: url("example.png");
background-size: cover;
}
2.3 控制背景图位置
使用CSS中的background-position属性可以控制背景图的位置。该属性可以接受两个值，第一个值是水平位置，第二个值是垂直位置。可以使用像素、百分比、关键字等来指定位置。
例如，可以将背景图片定位到页面的中心：
body {
background-image: url("example.png");
background-size: cover;
background-position: center center;
}
也可以只指定一个值来控制水平或者垂直方向的位置：
/* 水平位置居中，垂直位置居上 */
body {
background-image: url("example.png");
background-size: cover;
background-position: center top;
}
/* 水平位置居左，垂直位置居中 */
body {
background-image: url("example.png");
background-size: cover;
background-position: left center;
}
/* 水平位置居右，垂直位置居中 */
body {
background-image: url("example.png");
background-size: cover;
background-position: right center;
}
3.不重不平铺
当设置了背景图片时，默认情况下背景图会被平铺在元素里面，如果需要背景图不重不平铺，需要设置background-repeat属性为no-repeat。
例如，可以将背景图片设置为不重不平铺：
body {
background-image: url("example.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
4.示例代码
下面是一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("example.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
>
Welcome to my page!
</body>
</html>
5.总结
使用CSS来设置背景图的属性，可以让网页更加美观和有趣。通过本篇文章，你学会了如何添加背景图片、如何设置背景图片的大小和位置，以及如何让背景图片不重不平铺。希望这些内容对你有所帮助。