移动端背景图垂直位置偏移为何不生效？检查 background-position-y 数值
背景图垂直位置偏移不生效通常是因为使用了简写属性覆盖了单独设置的 background-position-y 值。
检查简写属性是否覆盖了单独设置
单独设置 background-position-y 后，如果后续使用了 background 或 background-position 简写属性，单独的垂直位置设置会被完全覆盖。MDN 文本指出，background-position-y 的值会被任何后续对元素应用的 background 或 background-position 简写属性的声明所覆盖。这意味着在代码中，如果先写了 background-position-y: bottom 10px，紧接着又写了 background: ...，那么之前的垂直位置设置将失效。
排查时需要检查 CSS 代码的顺序。确保在声明 background 或 background-position 简写属性之前，已经完成了 background-position-y 的设置。如果必须使用简写属性，则应将垂直位置参数直接包含在简写属性中，而不是分开设置。例如，使用 background: url(...) no-repeat center bottom 10px 来同时控制水平和垂直位置。
确认数值类型与语法是否正确
除了属性覆盖问题，数值类型和语法错误也会导致设置不生效。MDN 提供了 background-position-y 的正式语法，其中包含关键字（如 top、center、bottom）和长度百分比值。如果使用了不支持的语法，或者数值超出了允许的范围，浏览器可能无法正确解析。例如，语法要求值是中心关键字与可选的长度或百分比的组合。
验证数值时，应对照 MDN 提供的示例。确保使用了正确的单位，如 px、rem 或百分比。如果使用了边距偏移语法，例如 bottom 10px，需要确认浏览器支持这种侧边相对偏移的写法。检查代码中是否有拼写错误或多余的符号，这可能导致整个属性声明被忽略。
验证背景图尺寸与容器尺寸的关系
背景图的位置设置还依赖于背景图本身的尺寸和容器的尺寸。如果背景图尺寸小于容器尺寸，且没有设置 background-repeat 属性，背景图将固定在指定的位置。如果背景图尺寸大于容器尺寸，且没有设置 background-repeat: no-repeat，背景图可能会被裁剪。MDN 文本提到背景位置是相对于背景定位层设置的，该层由 background-origin 定义。
在验证时，可以检查背景图的实际尺寸是否与预期一致。如果背景图尺寸过小，即使设置了 bottom 10px，背景图可能仍然显示在容器的顶部，因为其底部边缘无法到达容器的底部。此时需要调整背景图尺寸或使用 background-repeat 属性来重复背景图，以确保位置设置能够正确显示。
使用浏览器开发者工具检查计算后的样式
最后，使用浏览器的开发者工具来检查计算后的样式是确认问题的有效方法。在开发者工具的“元素”面板中，选中目标元素，查看“计算样式”部分。这里会显示浏览器最终应用的 background-position-y 值，以及任何被简写属性覆盖后的结果。
如果开发者工具显示的值与代码中设置的值不一致，说明存在覆盖或解析问题。通过对比代码和计算样式，可以快速定位问题所在。例如，如果代码中设置了 background-position-y: bottom 10px，但计算样式中显示为 center，则说明 background 或 background-position 简写属性覆盖了之前的设置。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。