1.背景图片平铺的问题
在css中，背景图片的平铺方式可以通过background-repeat属性来设置。background-repeat属性有四种值可选，分别是：
- repeat：背景图像在纵向和横向上平铺；
- repeat-x：背景图像在横向上平铺，在纵向上不平铺；
- repeat-y：背景图像在纵向上平铺，在横向上不平铺；
- no-repeat：背景图像不平铺。
1.1 repeat方式
先看一下使用repeat方式平铺的示例代码：
background-repeat: repeat;
下面是示例演示图：
可以看到，背景图片在横向和纵向上都进行了平铺。但是有时候我们并不想让背景图片完全平铺。
1.2 repeat-x和repeat-y方式
分别看一下repeat-x和repeat-y的示例代码：
background-repeat: repeat-x;
示例演示图如下：
background-repeat: repeat-y;
示例演示图如下：
可以看到，repeat-x方式只在横向上平铺，而repeat-y方式只在纵向上平铺。
1.3 no-repeat方式
no-repeat方式不平铺背景图片，完整的示例代码如下：
background-repeat: no-repeat;
示例演示图如下：
2.背景图片不平铺的方法
在以上示例中，我们可以看到使用background-repeat属性可以控制背景图片的平铺方式。那么如何让背景图片不平铺呢？其实有两种方法可以解决这个问题。
2.1.使用background-size属性
background-size属性可以控制背景图片的大小，具体语法如下：
background-size: 宽度 高度;
如果只设置一个值，那么表示宽高均为这个值，如果不设置某个值，则使用原图的比例。
比如下面的示例代码：
background-image: url("https://img-blog.csdn.net/20180823002845930?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lvdXJfY29kZTQy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80");
background-repeat: no-repeat;
background-size: 400px;
width: 100%;
height: 400px;
这里设置了background-image、background-repeat、background-size三个属性，使得背景图片不进行平铺，并把图片的宽度设置为400px，高度按比例自适应。演示效果如下：
这种方法适用于当只有一张背景图片，使用过程中可以进行单独的设置。
2.2.使用background属性
我们可以使用background属性来设置背景图片，并设置其中的多个属性值。比如下面的示例代码：
background: url("https://img-blog.csdn.net/20180823002845930?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lvdXJfY29kZTQy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80") no-repeat center center fixed;
background-size: cover;
这里首先使用background属性设置背景图片，设置了图片的src、是否平铺、水平、垂直对齐方式、图片是否随页面滚动固定等多个属性值。然后再使用background-size属性使图片自适应容器大小，保证完全显示。
演示效果如下：
这种方法适用于需要设置多个背景属性时使用，比较方便。
3.总结
通过以上两种方法，我们可以很容易地控制背景图片的平铺方式，同时也能很好地适应各种场景的需求。需要提醒的是，在使用背景图片时，要注意一些反文化问题，如背景图片的大小，是否会影响页面加载速度，以及移动端的适配等问题。