CSS background背景图Chrome不显示 仅VS Live Server正常

路径前导的/代表站点根目录绝对路径，两类运行环境对根目录的解析逻辑完全不同：

• VS Code Live Server 启动时会将当前打开的项目文件夹设为站点根目录，/assets/xxx会直接指向项目内的assets目录，资源可以正常加载
• 直接双击HTML文件通过浏览器打开时，页面走file://本地协议，此时前导/会被解析为当前磁盘的根目录（Windows下为系统盘根目录、macOS/Linux下为系统根目录），无法定位到项目文件夹内的图片资源，因此背景图加载失败。

根据使用场景二选一即可：

• 通用兼容方案：改用相对路径
  去掉CSS背景路径开头的/，写为相对于当前CSS文件的相对路径即可，该写法在本地服务启动、直接双击打开HTML两种场景下都能正常生效。
  如果你的CSS写在HTML内联位置、或者CSS文件存放在项目根目录，直接修改为如下代码即可：

  #hero {
    width: 100%;
    height: 100vh;
    background: url("assets/img/5secondhome_lon_ii_sca_8820.png") top center;
    background-size: cover;
    position: relative;
    padding: 0;
  }
  

  如果你的CSS文件存放在assets/css这类子目录下，需要通过../回退层级，比如图片路径写为../img/5secondhome_lon_ii_sca_8820.png，每多一层目录就多写一个../。
• 开发流程规范方案：全程使用本地静态服务访问页面
  开发阶段不要直接双击打开HTML文件，统一通过Live Server这类本地静态服务访问页面，该环境和线上web服务的解析逻辑一致，除了路径问题外，还能规避file://协议带来的跨域、本地资源加载限制等问题。项目上线部署时，只要将项目整体文件上传到web服务的站点根目录，原有/开头的绝对路径写法也可以正常运行。

HTML代码 #

<nav id="navbar" class="navbar">
  <ul>
    <li><a class="nav-link scrollto active" href="#hero">Home</a></li>
    <li><a class="nav-link scrollto" href="#about">About</a></li>
    <li><a class="nav-link scrollto" href="#services">Services</a></li>
    <li><a class="nav-link scrollto" href="#contact">Contact</a></li>
    <li><a class="getstarted scrollto" href="indexAR.html">العربيه</a></li>
  </ul>
  <i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->

</div>
</header><!-- End Header -->

<!-- ======= Hero Section ======= -->
<section id="hero">
  <div class="hero-container" data-aos="fade-up" data-aos-delay="150">
    <h1>Plan. Launch. Grow.</h1>
    <h2>We hope to create a world where our descendants can enjoy a sustainable future</h2>
    <div class="d-flex">
      <a href="#about" class="btn-get-started scrollto">Get Started</a>
    </div>
  </div>
</section><!-- End Hero --> 

异常CSS代码 #

#hero {
  width: 100%;
  height: 100vh;
  /* 开头的/是问题诱因，file协议下会解析到磁盘根目录 */
  background: url("/assets/img/5secondhome_lon_ii_sca_8820.png") top center;
  background-size: cover;
  position: relative;
  padding: 0;
}

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