移动端背景图垂直方向拉伸变形如何排查？检查 background-repeat round 值
当背景图在垂直方向上被拉伸变形时，应检查 CSS 中的 background-repeat 属性是否使用了 round 值。
确认 round 值是否导致图片垂直拉伸
在移动端开发中，如果发现背景图在垂直方向上被拉伸变形，首先需要检查 CSS 中的 background-repeat 属性。MDN 文档指出，round 是 background-repeat 的一个值，其行为是随着可用空间的增加，重复的图片会被拉伸以填满所有可用空间，直到有足够的空间容纳下一个重复图像。这意味着如果背景图片的宽高比与背景绘制区域（即元素本身）的宽高比不一致，使用 round 值会导致图片在垂直方向上被拉伸，从而破坏其原始的宽高比，造成视觉上的变形。
为了验证这一原因，可以在浏览器开发者工具中选中对应的元素，查看其计算后的样式。重点查看 background-repeat 的值是否为 round。如果确实是 round，那么图片被拉伸就是符合预期的行为。此时需要权衡是接受这种拉伸效果，还是修改 background-repeat 的值，例如改为 repeat 或 space，以避免图片变形。需要注意的是，round 是唯一可能导致背景图片宽高比发生变化的 repeat-style 值。
对比 repeat 与 round 的视觉效果差异
除了 round 值，background-repeat 还有其他值会影响背景图的显示方式。repeat 是默认值，它会在水平和垂直方向上尽可能多地重复背景图像，如果绘制区域的尺寸不是背景图像尺寸的整数倍，边缘的图像会被裁剪。这与 round 不同，round 会拉伸图像以填满空间，而 repeat 则是裁剪边缘。space 值则会在重复图像之间添加空白，确保图像不被裁剪，但也不会被拉伸。
在排查变形问题时，可以将 background-repeat 的值从 round 临时改为 repeat 或 space，然后刷新页面查看效果。如果改为 repeat 后图片不再变形，但出现了边缘裁剪，说明原问题确实是 round 导致的拉伸。如果改为 space 后图片保持原样且没有裁剪，则说明 round 的拉伸行为是造成变形的根本原因。通过这种对比，可以明确判断是否需要调整 repeat 值来解决变形问题。
检查背景图尺寸与绘制区域尺寸的关系
background-repeat 的行为还受到背景图尺寸（background-size）和背景绘制区域尺寸的影响。MDN 文档提到，重复多少次以及边缘图像被裁剪多少，取决于背景绘制区域的大小和对应的 background-size 值。如果 background-size 设置为 auto，浏览器会使用背景图的原始尺寸。如果背景绘制区域的高度不是背景图高度的整数倍，使用 repeat 值会裁剪边缘，而使用 round 值则会拉伸图像以填满剩余空间。
为了彻底排查，可以检查元素的宽高和背景图的尺寸设置。例如，如果背景图是 100px 高，而元素高度是 749px，使用 repeat 值会重复 7 次，边缘图像会被裁剪。使用 round 值则会重复 7 次，但每一张图片会被拉伸到 105px 高，从而造成变形。通过计算和调整 background-size，或者调整元素的尺寸，可以避免这种尺寸不匹配导致的变形问题。
使用浏览器开发者工具进行复现与验证
使用浏览器开发者工具可以直观地复现和验证 background-repeat round 值的影响。首先，选中出现变形的元素，在 Styles 面板中找到 background-repeat 属性。将其值修改为 repeat 或 space，观察页面的变化。如果变形消失，说明问题确实出在 round 值上。然后，将值改回 round，再次观察变形是否恢复。这种交互式的验证方法可以快速定位问题。
此外，还可以使用 Chrome DevTools 的 3D 视图或截图功能来对比不同 repeat 值下的效果。MDN 文档提供了多个示例，展示了不同 repeat 值下的视觉效果。通过参考这些示例，可以更好地理解 round 值的行为，并做出正确的判断。验证完成后，根据实际需求调整 CSS，确保背景图既符合设计要求，又不会出现不必要的变形。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。