一、使用background-repeat实现背景图平铺
在CSS中，我们可以使用background-repeat属性来实现背景图平铺的效果，该属性有四个取值:
- repeat: 在水平和垂直方向上都平铺；
- repeat-x: 在水平方向上平铺；
- repeat-y: 在垂直方向上平铺；
- no-repeat: 不平铺，仅在左上角显示一次。
下面是一个使用background-repeat实现背景图平铺的代码示例：
.example {
background-image: url('example.png');
background-repeat: repeat;
}
二、使用background-position实现背景图居中
虽然background-repeat可以让背景图平铺，但是有时候我们需要让背景图居中显示。这时可以使用background-position属性来实现。该属性有两个关键字、两个长度值和百分比的取值：
- left top：以左上角为基准点，靠左靠上对齐；
- center：以容器的中心为基准点，让背景图居中显示；
- 长度值：以容器左上角为基准点，将背景图水平方向或垂直方向上平移指定的距离；
- 百分比：以容器左上角为基准点，将背景图水平方向或垂直方向上平移指定的百分比。
下面是一个使用background-position实现背景图居中的代码示例：
.example {
background-image: url('example.png');
background-repeat: no-repeat;
background-position: center;
}
三、使用background-size实现背景图尺寸调整
在有些情况下，我们需要的背景图尺寸比容器大或小，这时可以使用background-size来调整背景图的尺寸。该属性的取值有以下几种：
- auto：保持背景图原始的宽高比例。
- contain：将背景图缩放至能完全显示在容器内，保持背景图宽高比例不变。
- cover：将背景图缩放至能覆盖整个容器，保持背景图宽高比例不变。
- 指定的长度值或百分比：
下面是一个使用background-size缩放背景图的代码示例：
.example {
background-image: url('example.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
四、完整的代码示例
下面是一个使用background-repeat、background-position和background-size实现背景图平铺效果的完整代码示例：
.example {
background-image: url('example.png');
background-repeat: repeat;
background-position: center;
background-size: cover;
}
以上就是CSS实现背景图平铺效果的方法和代码示例。我们可以通过修改background-repeat、background-position和background-size属性的值来应对不同的场景需求，实现不同的背景图效果。