介绍
在网页开发过程中，图片是一个常用的元素，用来美化我们的网页。有时，我们需要图片不重复拉伸，以免影响图片的清晰度和美观度。在本文中，我们将介绍如何使用 CSS 设置图片不重复拉伸。
background-repeat 属性
CSS 提供了 background-repeat 属性，它用于指定背景图像的重复方式。该属性的可选值包括：repeat、repeat-x、repeat-y 和 no-repeat。
值 repeat
repeat 值指定背景图像在水平和垂直方向上都重复。
background-repeat: repeat;
值 repeat-x
repeat-x 值指定背景图像只在水平方向上重复，而垂直方向上不重复。
background-repeat: repeat-x;
值 repeat-y
repeat-y 值指定背景图像只在垂直方向上重复，而水平方向上不重复。
background-repeat: repeat-y;
值 no-repeat
no-repeat 值指定背景图像不重复。
background-repeat: no-repeat;
background-size 属性
CSS 提供了 background-size 属性，它用于指定背景图像的大小。
值 cover
cover 值指定背景图像将被缩放到完全覆盖所在元素的背景区域。如果图像的宽高比例与所在元素的宽高比例不同，则图像的部分可能会被截取。
background-size: cover;
值 contain
contain 值指定背景图像将被缩放到完全适合所在元素的背景区域。如果图像的宽高比例与所在元素的宽高比例不同，则图像的部分可能会出现空白区域。
background-size: contain;
自定义值
我们也可以自定义 background-size 的值，比如指定宽度和高度。
background-size: 200px 100px;
background-position 属性
CSS 提供了 background-position 属性，它用于指定背景图像的位置。
关键字值
我们可以使用具有关键字值的 background-position 属性，如：left、center、right、top、middle 和 bottom。
background-position: top left;
像素值
我们也可以使用像素值指定位置。
background-position: 50px 100px;
在实际应用中使用
下面是一个使用 cover 值的 background-size 属性来设置图片为不重复拉伸的示例：
.img {
background-image: url('example.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
上述代码中，.img 类将图片设置为不重复拉伸，并将其居中显示。
结论
在本文中，我们介绍了如何使用 CSS 设置图片不重复拉伸。通过使用 background-size 属性的 cover 值，我们可以让图片不拉伸并居中显示。同时，通过使用 background-repeat 属性的 no-repeat 值，我们可以防止图片在重复时出现不良效果。从而，我们可以更好地使用图片来美化我们的网页。