移动端背景图被边框遮挡？检查 background-origin 属性

确认背景图定位的参考区域

背景图定位的参考区域由 background-origin 属性决定。该属性指定背景图像的起始位置是从边框开始、内边距开始还是内容区域开始。如果背景图被边框遮挡，通常是因为背景图定位的参考区域超出了边框范围。

MDN 文档指出，background-origin 有三个可选值：border-box、padding-box 和 content-box。默认值为 padding-box，表示背景图从内边距区域开始定位。如果设置为 border-box，背景图将延伸到边框区域，可能导致视觉上的遮挡或重叠问题。

检查代码中 background-origin 的具体设置是否与边框样式冲突。例如，当元素设置了较厚的边框且背景图定位在 border-box 时，背景图可能会覆盖边框的视觉表现。需要确认背景图是否需要延伸到边框区域，或者是否应该限制在内边距或内容区域。

MDN 提供的示例显示，当 background-origin 设置为 border-box 时，背景图会相对于边框盒定位。如果边框样式为虚线或实线，背景图可能会在边框内部或外部显示，导致视觉上的不协调。应调整 background-origin 的值以匹配设计需求。

通过修改 background-origin 的值来验证其对背景图显示的影响。将属性值从 border-box 改为 padding-box 或 content-box，观察背景图是否不再被边框遮挡。如果问题解决，说明背景图定位的参考区域设置不当。

MDN 文档强调，background-origin 在背景附件为 fixed 时会被忽略。因此，如果背景图定位异常，还需检查 background-attachment 属性的设置，确保其不会干扰 background-origin 的生效。

使用浏览器开发者工具的元素检查功能，查看背景图的实际渲染区域。通过切换 background-origin 的值，观察背景图在边框、内边距和内容区域中的显示情况。如果背景图被边框遮挡，可以直观地确认属性值的影响。

MDN 文档提到，background-origin 属性适用于所有元素，包括 ::first-letter 和 ::first-line。因此，在检查时需确保没有伪元素干扰背景图的定位。如果问题仍然存在，可以尝试重置属性值或检查其他 CSS 属性的设置。