内嵌CSS类设置背景图片不显示问题排查求助

核心问题排查 #

你遇到的问题主要来自两个关键点：

1. 图片路径的差异 #

CSS类中的路径是/img/roads.jpg（根相对路径，从网站根目录开始查找），而内联样式里的是img/roads.jpg（文件相对路径，相对于当前HTML文件所在目录查找）。即使你确认路径正确，这两种写法指向的文件位置可能完全不同，导致CSS类无法找到图片。

2. 父元素高度缺失 #

.test-background所在的.row元素没有设置高度，虽然子元素col-md-8有height:100vh，但父元素默认高度由内容撑开，此时.row的高度可能为0，背景图自然无法显示。内联样式生效可能是浏览器渲染时的偶然表现，但本质上父元素高度问题依然存在。

具体修复步骤 #

步骤1：统一图片路径 #

将CSS类中的路径修改为和内联样式一致的相对路径：

.test-background {
    background-image: url('img/roads.jpg');
    background-size: cover;
}

如果确实需要使用根相对路径，请确认网站根目录下存在/img/roads.jpg这个文件。

步骤2：为父元素设置高度 #

给.test-background添加高度属性，确保背景图有足够的显示空间：

.test-background {
    background-image: url('img/roads.jpg');
    background-size: cover;
    min-height: 100vh; /* 确保元素高度至少占满视口 */
}

额外排查：CSS优先级冲突 #

如果上述方法无效，检查是否有其他CSS规则（比如Bootstrap的内置样式）覆盖了.test-background的背景属性。可以通过浏览器开发者工具（F12）查看元素的样式计算结果，确认background-image是否被划掉（表示被覆盖）。

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