移动端背景图边缘被裁剪？检查 background-repeat-x 与 background-size
当移动端背景图在水平方向无法完整显示时，通常是因为背景图尺寸大于了背景绘制区域，导致边缘被裁剪。
确认背景图是否超出绘制区域
在移动端页面中，如果背景图在水平方向上出现被切断的情况，首先需要确认背景图的实际尺寸是否超过了背景绘制区域的宽度。根据 CSS 规范，背景图会被绘制在由 background-origin 和 background-clip 属性定义的区域内。如果背景图本身的宽度大于这个区域的宽度，浏览器会自动对超出部分进行裁剪。例如，当背景图宽度为 120px，而背景绘制区域宽度仅为 100px 时，多余的 20px 会被切掉。检查时可以使用浏览器开发者工具的元素面板，查看计算后的样式，确认 background-size 的宽度值是否大于背景绘制区域的宽度。
除了背景图本身的尺寸，背景绘制区域的大小也会影响裁剪情况。如果元素设置了 min-width: 100% 或其他导致宽度变小的属性，也会造成背景图超出。此时需要检查元素的宽度属性以及背景绘制区域的定义。如果背景图宽度大于元素宽度，且没有设置 background-repeat-x 为 repeat，那么图片只会显示一次，且超出部分会被裁剪。通过对比背景图尺寸和元素宽度，可以快速判断是否因为尺寸不匹配导致边缘被裁剪。
分析 background-repeat-x 的默认裁剪行为
background-repeat-x 属性决定了背景图在水平方向上的重复方式。默认值是 repeat，这意味着背景图会尽可能多地重复以覆盖整个背景绘制区域。如果背景图宽度小于绘制区域，它会重复多次填满；如果背景图宽度大于绘制区域，浏览器会自动裁剪边缘图像以适应区域大小。例如，当背景图宽度为 120px，而绘制区域宽度为 100px 时，repeat 模式下只会显示部分图像，边缘会被裁剪。这种裁剪行为是浏览器为了确保背景图填满区域而进行的自动处理。
除了 repeat，background-repeat-x 还有其他值，如 space 和 round。space 模式下，背景图会尽可能重复而不被裁剪，并在图像之间均匀分配空白。如果背景图宽度大于绘制区域，space 模式下背景图会被裁剪，因为无法在不裁剪的情况下显示完整图像。round 模式下，背景图会拉伸以填满可用空间，直到可以容纳下一个图像。如果背景图宽度大于绘制区域，round 模式下背景图会被拉伸并可能变形。因此，当背景图边缘被裁剪时，需要检查 background-repeat-x 的值是否为 repeat，以及背景图尺寸是否大于绘制区域。
检查 background-size 对裁剪的影响
background-size 属性定义了背景图的尺寸，它直接影响背景图的宽度和高度。如果 background-size 设置为具体的像素值或百分比，且宽度值大于背景绘制区域的宽度，那么背景图会被裁剪。例如，设置 background-size: 120px; 会导致背景图宽度为 120px，如果绘制区域宽度为 100px，边缘会被裁剪。检查时需要确认 background-size 的宽度值是否合理，是否与背景绘制区域的宽度匹配。如果背景图需要完整显示，可以调整 background-size 的值，使其小于或等于绘制区域的宽度。
background-size 还可以设置为 cover 或 contain。cover 模式下，背景图会拉伸以覆盖整个背景绘制区域，可能会裁剪部分图像。contain 模式下，背景图会完整显示，但可能不会填满整个区域。如果背景图边缘被裁剪，可能是因为使用了 cover 模式且背景图尺寸大于绘制区域。检查时需要确认 background-size 的值是否为 cover 或 contain，以及背景图的实际尺寸是否与绘制区域匹配。如果需要完整显示背景图，可以调整 background-size 的值，使其小于或等于绘制区域的宽度。
验证裁剪结果与调整方案
验证裁剪结果的方法是使用浏览器开发者工具的元素面板，查看计算后的样式，确认 background-size 的宽度值是否大于背景绘制区域的宽度。如果确认背景图宽度大于绘制区域，可以调整 background-size 的值，使其小于或等于绘制区域的宽度。例如，将 background-size: 120px; 改为 background-size: 100px; 可以避免边缘被裁剪。如果背景图需要重复显示，可以调整 background-repeat-x 的值，如改为 space 或 round，以避免边缘被裁剪。
如果背景图需要完整显示且不裁剪，可以调整背景绘制区域的大小，使其等于背景图的宽度。例如，设置元素的宽度为 120px，并确保背景绘制区域宽度也为 120px。如果背景图需要填满整个区域，可以调整 background-size 的值，使其小于或等于绘制区域的宽度。通过调整 background-size 和 background-repeat-x 的值，可以避免背景图边缘被裁剪，确保背景图完整显示。验证调整后的效果，确认背景图是否完整显示，边缘是否被裁剪。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。