Question

我试图将图像用作我的jumbotron的背景，并且无法显示图像。我可以很好地改变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>

...这里是我的CSS

    .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

感谢大家的回答！我最终采取了不同的路线，只是将我想要的背景图像放在身体而不是jumbotron。然后我让jumbotron背景透明，以便背景图像通过。

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

3 个答案: