HTML CSS背景图加载异常、Opera GX下重复显示问题排查

存在的明确错误 #

• 属性值非法：contain是background-size属性的标准取值，不属于background-position的合法值范围。background-position仅支持长度单位值、百分比、top/left/right/bottom/center方位关键字，当前代码把contain赋值给background-position属于无效CSS声明。
• 资源路径存在隐患：背景图地址使用了相对路径photo_2022-07-10_18_45-38.jpg，没有设置统一的路径解析基准。

异常现象的触发原因 #

• 单个页面背景图加载失败：相对路径的解析基准是当前页面的URL路径、或外部CSS文件的存放路径，浏览器会基于这个基准拼接资源地址。如果三个页面不处于完全相同的目录层级，出问题的页面会拼接出错误的图片请求地址，返回404状态码导致背景图无法加载。例如正常页面在站点根目录，异常页面存放在/category/子目录下时，浏览器会尝试从/category/photo_2022-07-10_18_45-38.jpg路径拉取图片，和实际图片存放位置不符。
• Opera GX下背景重复、Firefox/Edge下正常：不同浏览器的CSS解析容错逻辑存在差异。Opera GX为Chromium内核定制版本，部分版本遇到background-position的非法值时，会重置同规则块下所有背景相关属性到默认值，background-repeat的默认值就是repeat，因此手动写的no-repeat规则失效，出现平铺。而Firefox、Edge当前稳定版的解析器只会丢弃非法的background-position单条声明，不会影响同块内其他合法的背景属性规则，因此no-repeat可以正常生效。

修正后参考代码 #

body {
  /* 清除默认边距，设置最小高度撑满视口，避免背景高度不足 */
  margin: 0;
  min-height: 100vh;
  /* 改用站点根绝对路径，所有页面都能从统一位置解析图片地址 */
  background-image: url('/photo_2022-07-10_18_45-38.jpg');
  /* contain值归位到background-size属性，也可根据需求替换为固定尺寸 */
  background-size: contain;
  /* background-position使用合法的居中值 */
  background-position: center;
  background-repeat: no-repeat;
}

内容的提问来源于stack exchange，提问作者1440p