如何修复HTML背景图片无法显示的代码问题？

你的代码里背景图片无法显示主要有三个问题：本地路径的浏览器安全限制、路径格式错误、路径前缀冲突，以下是具体修复方法：

推荐方案：使用相对路径 #

把图片放到HTML文件所在的目录（或子目录），用相对路径引用，这是最稳定的方式：

1. 将Mountains.jfif移动到和HTML文件同一个文件夹中
2. 修改CSS里的background-image属性：

.background-image {
    background-image: url('Mountains.jfif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
}

如果图片放在子目录（比如新建一个images文件夹），路径改为：

background-image: url('images/Mountains.jfif');

备选方案：修复绝对路径并通过本地服务器访问 #

如果必须使用本地绝对路径，需要做两处修改：

1. 修正路径格式：把Windows路径的反斜杠\换成正斜杠/，或者转义为\\：

/* 方式1：替换为正斜杠 */
background-image: url('C:/Users/viraj/Downloads/html/Mountains.jfif');
/* 方式2：转义反斜杠 */
background-image: url('C:\\Users\\viraj\\Downloads\\html\\Mountains.jfif');

2. 不要直接双击HTML文件打开，通过本地服务器访问：
   • 用Python启动本地服务器：在HTML文件所在目录打开命令行，执行python -m http.server，然后在浏览器访问http://localhost:8000
   • 或者用VSCode的Live Server插件，右键选择"Open with Live Server"

特殊方案：使用file协议 #

如果不想用服务器，也可以用file协议的正确格式，但可能受浏览器安全策略限制：

background-image: url('file:///C:/Users/viraj/Downloads/html/Mountains.jfif');

注意路径开头是file:///（三个斜杠），后面跟盘符开头的正斜杠路径。

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