移动端背景图水平位置偏移？检查 background-position-x 百分比计算
当移动端背景图水平位置未按预期居中时，应检查 background-position-x 的百分比取值是否正确。
检查百分比取值是否为 50%
背景图水平位置偏移通常是因为百分比取值不正确。根据规范，百分比取值 0% 表示背景图左边缘与容器左边缘对齐，100% 表示背景图右边缘与容器右边缘对齐，而 50% 则能实现水平居中。如果代码中使用了其他数值，背景图将不会居中显示。
开发者应确认 CSS 代码中 background-position-x 的值是否为 50%。如果使用了 left、right 等关键字，虽然能快速定位，但可能无法精确控制偏移量。对于需要精确控制位置的场景，百分比是更可靠的选择。
验证背景定位层与容器的关系
背景图的位置是相对于 background-origin 定义的定位层计算的。如果定位层与容器尺寸不一致，百分比计算结果也会不同。例如，如果定位层比容器小，背景图可能会超出容器范围。开发者应检查定位层是否与容器大小一致。
可以通过设置 background-origin 为 border-box 或 padding-box 来调整定位层的位置。默认情况下，定位层是 padding-box。确保定位层与容器尺寸一致，可以避免背景图显示异常。
确认属性是否被简写属性覆盖
如果代码中同时使用了 background 或 background-position 简写属性，background-position-x 的值可能被覆盖。根据规范，简写属性会重置所有背景相关属性，包括 background-position-x。因此，即使单独设置了 background-position-x，简写属性也会生效。
开发者应检查 CSS 代码中是否存在简写属性。如果存在，建议移除简写属性，单独设置 background-position-x。这样可以确保背景图位置按预期显示。例如，将 background: url(...) no-repeat center bottom 改为 background-position-x: center。
测试不同浏览器兼容性
background-position-x 属性在 2016 年 9 月起在主流浏览器中广泛可用。但不同浏览器对百分比计算的支持可能略有差异。开发者应在移动端浏览器中测试背景图位置是否正确。如果发现异常，可以尝试使用关键字或长度单位替代百分比。
如果百分比计算在特定浏览器中不生效，可以改用 left 50% 或 50% left 等语法。这些语法同样能实现水平居中，且兼容性更好。测试时建议覆盖主流移动端浏览器，确保背景图位置一致。例如，在 iOS Safari 和 Android Chrome 中分别测试。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。