1. 前言
背景图是网页设计中常用的元素之一，可以起到美化页面的作用。但是，在不同尺寸的设备上，背景图的大小会有所不同，可能会出现拉伸或缩放的情况，影响页面的美观性。因此，在这篇文章中，我们将学习如何让背景图拉伸，使之适应不同尺寸的设备。
2. 使用background-size属性
2.1 background-size概述
background-size是CSS3新增的一个属性，用于设置背景图的尺寸大小，可以让图片自适应其容器的大小。该属性有两个值：
contain：等比例缩放背景图，使之适应容器的大小，图像始终完全包含在容器内。
cover：等比例缩放背景图片，使之覆盖容器的整个区域，容器中可能会存在空白区域。
2.2 使用contain让背景图拉伸
我们来看一个例子，使用contain让背景图拉伸。
background-size: contain;上面的代码将背景图按比例缩放，直到其宽度或高度与容器完全相同。如果容器的宽度和高度与图像的宽度和高度不同，背景图会被填充在容器中，并且两个方向上会留有间隙。
下面是一个例子，我们设置一个容器，添加一个背景图，并用contain让其拉伸。
.container{
width: 500px;
height: 300px;
background-image: url('example.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
上面的代码中，我们设置了一个宽度为500px，高度为300px的容器，添加了一个名为example.jpg的背景图，使用contain让其拉伸，背景图位于容器的中间。
2.3 使用cover让背景图拉伸
除了使用contain，我们还可以使用cover让背景图拉伸。
background-size: cover;上述代码中，我们设置背景图片要覆盖整个容器，如果容器和图片的宽高比例不同，将仅在容器的某些部分显示图像，其他区域将显示空白。
下面是一个例子，我们设置一个容器，添加一个背景图，并用cover让其拉伸。
.container{
width: 500px;
height: 300px;
background-image: url('example.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
上述代码中，我们设置了一个宽度为500px，高度为300px的容器，添加了一个名为example.jpg的背景图，使用cover让其拉伸，背景图位于容器的中间。
3. 使用background-size和background-position属性结合
在使用background-size属性的同时，我们还可以结合使用background-position属性，来改变背景图的位置，以适应不同尺寸的设备。
下面是一个例子，我们设置一个容器，添加一个背景图，使用contain让其拉伸，并使用background-position调整图像的位置。
.container{
width: 100%;
height: 500px;
background-image: url('example.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
上述代码中，我们设置了一个宽度为100%，高度为500px的容器，添加了一个名为example.jpg的背景图，使用contain让其拉伸，背景图位于容器的中间。
由于我们设置了background-position: 50% 50%，图像就会居中显示。如果我们将其设置为background-position: 0 0;，则背景图将沿着左上角对齐。
4. 总结
通过本文，我们学习了如何使用CSS让背景图拉伸，使之适应不同尺寸的设备。我们可以使用background-size属性，结合contain或cover实现背景图的拉伸和裁剪；我们也可以结合使用background-size和background-position属性调整背景图在容器中的位置。通过合理运用这些属性，我们可以使背景图在不同分辨率的设备上呈现出最佳效果。