如何在Bootstrap jumbotron上获取背景图像

Question

我正在尝试使用图像作为我的巨型加速器的背景，但无法显示图像。我可以很好地更改jumbotron的其他属性，但不能找出我在背景图像上做错了什么。

这是我的html

    <header>
        <div class="jumbotron">
          <div class="container">
            <h1 class="display-3"> Large Text </h1>
            <h1 class="display-4"> Smaller Text </h1>
            <p><a href="#" class="btn btn-success btn-lg">Learn More »</a></p>
         </div>
        </div>
      </header>

这是我的...and

    .jumbotron {
        background: url("img/banner.jpg");
        color: black;
      }

为什么我不能让它工作？我的文件路径绝对是正确的。

提前感谢您的帮助！

Answer 1

我也遇到过类似的问题。正在尝试各种解决方案，以便在巨型加速器的背景中获得图像。最终找到了问题所在。

我在html中引用了错误的css文件...

我知道呀。基本的。但这些往往是我们忽略的东西！

Answer 2

它应该可以工作，请参阅http://jsfiddle.net/C4Sjg/538/

.jumbotron{
    background-image: url(https://www.google.co.in/logos/doodles/2016/ladislao-jose-biros-117th-birthday-5067428201496576-res.png);
    color:white;
}

如果这不起作用，那么你应该检查你的代码元素，看看是什么问题，如果你能提供问题的现场链接，那么这将很容易为我们找到问题

Answer 3

感谢大家的回答！我最终选择了一条不同的路线，只是把我想要的背景图像放在身体里，而不是放在巨型加速器里。然后我只是让巨型加速器的背景变得透明，这样背景图像就可以看到了。