移动端背景图底部留白过多？检查 background-position-y 的百分比计算
当移动端背景图底部出现多余留白时，通常是因为垂直定位计算方式与预期不符，应重点检查 background-position-y 属性的百分比取值逻辑。
排查背景图垂直定位的取值方式
移动端页面中背景图底部留白异常，首先需要确认当前使用的定位数值类型。根据 CSS 规范，background-position-y 的百分比取值是相对于容器高度计算的，而不是背景图本身的高度。如果使用了 50% 等数值，浏览器会将背景图垂直居中于容器，这可能导致底部出现空白区域。检查代码中是否直接使用了百分比数值，或者是否在 shorthand 属性中覆盖了该值。
MDN 文档指出，background-position-y 的初始值为 0%，表示背景图顶部与定位层顶部对齐。当设置为 100% 时，背景图底部与定位层底部对齐。如果发现留白，可能是使用了非标准的定位方式或浏览器兼容性问题。建议先查看浏览器开发者工具的 Styles 面板，确认最终应用的值是否与代码一致。
验证定位层与背景图尺寸的关系
背景图留白问题往往与定位层（由 background-origin 定义）的尺寸有关。如果定位层的高度小于背景图本身的高度，且未设置 background-size，背景图会被裁剪。此时使用百分比定位会导致计算偏差。检查 background-origin 属性，确认定位层是否为 padding-box 或 border-box，这会影响定位区域的计算范围。
可以通过设置 background-size: cover 或 100% 100% 来确保背景图填满定位层。如果背景图尺寸小于定位层，使用 background-position-y: bottom 可以强制底部对齐。测试时，将 background-position-y 设置为 bottom 10px 或 bottom 10%，观察留白是否减少。
使用具体数值替代百分比进行测试
为了排除百分比计算的不确定性，可以尝试使用具体的长度单位（如 px 或 rem）来定位背景图。例如，将 background-position-y 设置为 bottom 32px 或 0px，观察留白是否消失。MDN 示例中展示了 bottom 32px 的用法，这种 side-relative 值可以直接指定从底部偏移的距离。
如果使用长度单位后留白消失，说明问题出在百分比计算上。此时可以调整百分比数值，例如从 50% 改为 40%，或结合使用 top 和 bottom 关键字。验证时，确保背景图不重复（background-repeat: no-repeat），并检查是否有其他 CSS 规则覆盖了定位值。
检查覆盖属性与浏览器兼容性
background-position-y 的值可能被 background 或 background-position 简写属性覆盖。检查 CSS 代码中是否有简写声明，并确认其位置是否在具体属性之后。MDN 提到，简写属性会重置 background-position-y 的值，因此需要调整代码顺序或使用 !important（不推荐）。
background-position-y 在 2016 年 9 月起在主流浏览器中广泛可用，但部分旧版本可能存在兼容性问题。如果问题仅在特定浏览器中出现，可以尝试添加浏览器前缀或回退到 background-position 简写属性。验证结果时，使用不同设备或浏览器测试，确保留白问题已解决。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。