移动端部分页面引用同一份CSS时万圣节背景图不显示（桌面端正常）

• 核心是部分移动端浏览器对CSS自定义属性（变量）中相对路径的解析逻辑不符合规范：规范要求CSS中所有相对路径都以CSS文件所在路径为基准解析，但部分移动端浏览器/低版本webview会以当前HTML页面的地址栏路径为基准解析CSS变量内的url路径。
• 首页路径为站点根目录时，路径解析结果正确，背景图可正常加载；其他页面如果处于多级目录（多页应用场景）或者是SPA前端路由的虚拟多级路径，相对路径解析出来的地址会指向不存在的路径，导致背景图404加载失败。
• 颜色类变量不受路径解析逻辑影响，所以高亮样式可以正常生效。

• 【最推荐】将CSS变量中的背景图路径改为站点绝对路径，直接从根目录定位资源，避免不同页面的路径解析差异：

:root {
  /* 替换原来的相对路径写法，路径开头加/表示从站点根目录开始查找 */
  --img-bg-he: url(/holiday-img/101.jpg);
}

• 【备选】如果不方便使用绝对路径，就不要把背景图路径放在CSS变量中，直接在对应选择器内写路径，该写法所有浏览器都会统一以CSS文件路径为基准解析：

/* 删掉:root里的--img-bg-he变量，直接写如下样式 */
body, .gray, .gray_XL {
  background-image: url(../holiday-img/101.jpg);
}

• 【验证方法】可以使用移动端远程调试工具查看加载失败页面的网络请求，确认背景图的实际请求地址是否和预期地址一致，可快速验证路径解析问题。

内容的提问来源于stack exchange，提问作者Private Parties