VS Code Live Server正常，直接打开HTML文件部分元素不显示

问题核心是你用了以/开头的绝对路径：

• Live Server运行在服务器环境下，/指向你的项目根目录，所以能正确找到fonts/和img/里的资源。
• 直接打开HTML文件时，浏览器用的是本地文件协议（file://），这时/会指向系统根目录（比如Windows的C盘根目录、Mac的系统根目录），根本找不到你项目里的资源文件，自然加载失败。

解决步骤 #

把路径改成相对路径，去掉开头的/，路径写法根据CSS文件的位置调整：

• 如果CSS文件和fonts/、img/文件夹在同一层级（比如都在项目根目录下），直接写资源的相对路径即可：

@font-face {
    font-family: Raleway;
    src: url(fonts/Raleway-Medium.ttf);
  }
main{
    background-image: url('img/pozadina.png');
    background-repeat: no-repeat;
    background-position: center;
}

• 如果CSS文件在子文件夹（比如css/）里，需要先回到上一级目录，再指向资源：

@font-face {
    font-family: Raleway;
    src: url(../fonts/Raleway-Medium.ttf);
  }
main{
    background-image: url('../img/pozadina.png');
    background-repeat: no-repeat;
    background-position: center;
}

修改后直接打开HTML文件，按F12打开浏览器控制台，切换到「网络」标签，确认资源没有404错误，就说明加载成功了。

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