能否修改CSS中相对路径默认解析规则，优先匹配HTML所在目录？

要实现「优先加载HTML所在目录的banner.jpg，不存在则用CSS目录默认图」的需求，有两种可行方案，分别适用于不同场景：

一、固定HTML路径场景：CSS多重Fallback #

如果所有HTML文件相对于CSS文件的路径是固定的（比如CSS在/css/目录，所有HTML都在网站根目录），可以直接利用CSS的多重背景特性——浏览器会按顺序尝试加载背景图，找到存在的资源就停止后续加载。

示例CSS代码：

body {
  /* 先尝试HTML所在目录的图片（这里假设HTML在CSS的上级目录），失败则用CSS目录的默认图 */
  background-image: url("../banner.jpg"), url("banner.jpg");
}

注意：这里的../是CSS文件指向HTML目录的相对路径，需要根据你的实际目录结构调整。如果HTML在不同子目录，这个方法不适用。

二、通用场景：JavaScript动态检测加载 #

如果HTML文件分布在不同目录，CSS无法统一指向所有HTML的位置，就需要用JS来动态检测并切换背景图：

1. 先在CSS中设置默认背景图（CSS目录的banner.jpg）：

body {
  background-image: url("banner.jpg");
}

2. 在HTML中添加一段JS代码（建议放在</body>前），尝试加载当前HTML目录的banner.jpg，成功则替换背景：

<script>
  const testBanner = new Image();
  testBanner.src = 'banner.jpg';
  testBanner.onload = () => {
    document.body.style.backgroundImage = 'url("banner.jpg")';
  };
  // 加载失败时无需处理，保持CSS的默认背景即可
</script>

这个方法不管HTML在哪个目录，都会自动尝试加载当前目录的图片，完全符合你想要的「类似PATH优先级」的效果。

内容的提问来源于stack exchange，提问作者Mike Pierce