Jumbotron背景图片不显示，仅默认背景可见问题求助

我来帮你排查一下这个问题，看了你的代码后，发现几个关键的小问题需要修正，调整后应该就能正常显示背景图了：

• CSS选择器错误
  你写的.jumbotron .jumbotron-fluid是后代选择器，它会匹配.jumbotron内部的.jumbotron-fluid元素，但你的HTML里只有一个带.jumbotron类的div。如果你的元素同时需要这两个类（比如Bootstrap的全屏Jumbotron），应该把选择器写成.jumbotron.jumbotron-fluid（没有空格，代表同一个元素拥有多个类）；如果只需要基础的Jumbotron，直接用.jumbotron作为选择器就好。

• 中文引号导致路径失效
  你的背景图路径用了中文单引号‘../img/bghead.jpg’，CSS只识别英文的引号（单双引号都可以），改成url('../img/bghead.jpg')或者直接去掉引号url(../img/bghead.jpg)。

• 验证图片路径是否正确
  确认你的文件结构是否符合路径预期：如果CSS文件放在css/文件夹下，../img/bghead.jpg表示回到项目根目录，再进入img文件夹找图片。正确的结构应该是这样的：

  项目根目录/
  ├── img/
  │   └── bghead.jpg
  ├── css/
  │   └── 你的样式文件.css
  └── index.html
  

  如果路径不对，根据实际结构调整成正确的相对路径。

• 顺便修正字体声明的小问题
  你的font-family: 'Opens Sans' sans-serif;有两处错误：一是字体名称写错了，应该是Open Sans；二是多个字体之间需要用逗号分隔，正确写法是font-family: 'Open Sans', sans-serif;。

修正后的代码示例 #

HTML（如果使用全屏Jumbotron）

<div class="jumbotron jumbotron-fluid">
  <h1>Welcome to y</h1>
  <p>We blablabla</p>
</div>

CSS

.jumbotron.jumbotron-fluid {
  background-image: url('../img/bghead.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.jumbotron h1 {
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
}

如果不需要全屏效果，HTML去掉jumbotron-fluid类，CSS选择器改成.jumbotron即可。

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