1. 简介
在网站设计中，经常需要用到图片平铺的效果来美化页面。CSS中提供了多种方式实现图片平铺，本文将对几种常用的方式进行详细介绍。
2. background-repeat属性
2.1 属性值
background-repeat属性规定了背景图片的平铺方式。其可选值如下：
repeat: 背景图像在纵向和横向上平铺。
repeat-x: 背景图像在横向上平铺，纵向不平铺。
repeat-y: 背景图像在纵向上平铺，横向不平铺。
no-repeat: 背景图像不平铺。
2.2 代码示例
下面是一个简单的CSS代码示例，演示了如何使用background-repeat属性来设置背景图片的平铺方式：
.background-image {
background-image: url("background.png");
background-repeat: repeat;
}
在上面的例子中，class为“background-image”的元素背景将使用名为“background.png”的图片，并将其横向和纵向上平铺。
3. background-size属性
3.1 属性值
background-size属性指定背景图片的尺寸大小。
background-size通常使用下列属性值：
length: 指定背景图片的宽度和高度，单位为像素(px)。
percentage: 指定背景图片的宽度和高度，用百分比表示。
cover: 自动缩放背景图片，使其完全覆盖元素。
contain: 自动缩放背景图片，使其全部显示在元素内。
3.2 代码示例
下面是一个简单的代码示例，演示了如何使用background-size属性来设置背景图片的尺寸大小：
.background-image {
background-image: url("background.png");
background-repeat: no-repeat;
background-size: 100px 100px;
}
在上面的例子中，class为“background-image”的元素背景将使用名为“background.png”的图片，不进行平铺，并将其宽度设置为100像素，高度也设置为100像素。
4. gradient渐变
4.1 linear-gradient方法
linear-gradient()方法可以实现水平，垂直，对角线，径向等多种渐变效果。
语法如下：
background-image: linear-gradient(渐变方向, 开始颜色位置(颜色), 结束颜色位置(颜色));
其中，渐变方向可以取如下值：
to top: 从底部到顶部渐变。
to bottom: 从顶部到底部渐变。
to left: 从右到左渐变。
to right: 从左到右渐变。
45deg: 从左上到右下渐变。
从开始颜色位置到结束颜色位置可以设置多个颜色，用逗号隔开，颜色位置可以是长度或百分比。如，下列例子是一个使用linear-gradient()方法实现的水平渐变效果：
.background-image {
background-image: linear-gradient(to right, #FEB692, #EA5455, #FF9D6C);
}
在上面的例子中，class为“background-image”的元素将呈现一个从左往右的渐变效果，颜色从#FEB692渐变到#EA5455，再变为#FF9D6C。
4.2 radial-gradient方法
radial-gradient()方法可以实现径向渐变效果。
语法如下：
background-image: radial-gradient(开始颜色位置(颜色), 结束颜色位置(颜色));
下列例子是一个使用radial-gradient()方法实现的径向渐变效果：
.background-image {
background-image: radial-gradient(#FEB692, #EA5455, #FF9D6C);
}
在上面的例子中，class为“background-image”的元素将呈现一个径向渐变效果，颜色从#FEB692渐变到#EA5455，再变为#FF9D6C。
5. 小结
通过使用background-repeat、background-size、linear-gradient、radial-gradient这四个CSS属性，我们可以让页面使用美丽和谐的背景图片。在实际应用中，我们可以结合实际需要，细致地选择属性值，达到理想的效果。