Question

我已经尝试了一切，到处搜寻。但似乎没有任何效果。这是一个容易解决的问题，我想，我只是没有单独到那儿。

我想在我的jumbotron上设置一个背景图片，因为我正在使用bootstrap。

这就是我所做的。

<div class="jumbotron center " > <!-- start jumbotron -->

  <div class="container">

    <div class="jb-text">
        <h1>This is an epic service</h1>
        <h3>Not really, just trying this thing out</h3>
    </div>

    <button class="btn btn-default" id="btn-custom"><a href="#">Start Your     <strong>Free</strong> Trial</a></button>

  </div> <!-- end container -->

</div> <!-- end jumbotron -->

这就是CSS

.jumbotron{
    background-image: url('image/green-forest.jpg') no-repeat center center;

}

不幸的是没有任何事情发生。

Answer 1

问题是您使用了background-image而不是background属性。

Answer 2

我遇到了同样的问题。由于我的css文件包含在stylesheets文件夹中，并且我将图像存储在不同的文件夹中，因此我不得不将其更改为：

.jumbotron{
    background-image: url('../image/green-forest.jpg') no-repeat center center;
}

这是因为您的网址与您的css文件的位置有关，而不是您的HTML文件。

Answer 3

它可能是两件事的组合：

首先，您已指定background-image属性。如果您还没有添加其他属性，这将没有问题。所以你应该在这里使用background属性 - 就像上一个答案一样。
接下来，您的jumbotron样式是否实际应用还取决于您在页面中加载CSS文件的其他样式。如果您在之前加载CSS文件，那么Bootstrap CSS文件中的样式可能会覆盖您的样式。在这种情况下，您的样式将不适用。因此，您应该在加载Bootstrap CSS文件后加载特定的CSS文件。

Answer 4

.jumbotron{
    background-image: url(../image/green-forest.jpg); }

请尝试使用此代码将图像设置为Jumbotron类。

Jumbotron背景图像

4 个答案: