Bootstrap style.css 中未设置 Jumbotron 背景图像

Question

我无法从我的外部样式表文件设置超大屏幕背景图像，尽管样式是内嵌的。

样式表 link 可以在 head 标签之间和 bootstrap link 之后找到。我已经为此工作了几天，但没有成功，这可以完成吗？

这是我目前的情况：

CSS:

.jumbotron {
    background: url('img/rocket.png');
    background-repeat:no-repeat;
    background-color: #28b8f7;
    color: #fff;
    border-top: 1px solid #005D85;
    border-bottom: 1px solid #005D85;
}

这是HTML：

<!-- Jumbotron & Call to Action -->
<div class="jumbotron">
    <div class="container">
        <h1 class="text-right"></h1>
        <div class="col-sm-6 col-sm-offset-6">
            <p class="pull-right"><br />
            <a class="btn btn-default btn-lg pull-right jumbut" href="#signUpModal" role="button" data-toggle="modal"></a></p>

        </div>
    </div>
</div>

不过，与我已经尝试过的代码相比，这段代码似乎有效：

<!-- Jumbotron & Call to Action -->
<div class="jumbotron" style="background: url('img/rocket.png');background-repeat:no-repeat;background-color:#28b8f7;">
    <div class="container">
        <h1 class="text-right"></h1>
        <div class="col-sm-6 col-sm-offset-6">
            <p class="pull-right"><br />
            <a class="btn btn-default btn-lg pull-right jumbut" href="#signUpModal" role="button" data-toggle="modal"></a></p>

        </div>
    </div>
</div>

Answer 1

从你最后的评论来看，这只是你 url 对你当前所在位置的错误。据我所知，这是你的基本结构

-index.html
-css (folder)
--style.css
-img (folder)
--rocket.png

您在 style.css 中定义了以下属性

background: url('img/rocket.png');

因为你的css在根目录下一个叫'css'的文件夹里，当浏览器查看你的url时，它会相对于它的当前位置解析它，所以它会结束向上请求 http://yourgreatsite.com/css/img/rocket.png。这就是为什么当你将它直接放在你的 html 中时它起作用的原因，因为它正在解析相对于它当前位置的 url，这是根，所以它最终请求 http://yourgreatsite.com/img/rocket.png。

解决起来非常简单，使用点告诉浏览器导航 'up' 离开您的 css 文件夹，然后进入您的图像文件夹。

background: url('../img/rocket.png');

如果您使用内置开发者工具的浏览器，这将非常明显。大多数现代浏览器都有一些开发者工具或 'Inspectors' 可用。打开其中一个，您通常会发现一个名为 'Net' 或 'Network' 或 'Requests' 的面板。这将列出您的网页在内部或外部发出的每个请求，并突出显示任何出错的请求。在这种情况下，它会显示对背景图片的请求返回“404 文件未找到”，并向您显示它试图使用的 url。学习使用开发人员工具，它们会让您的生活更轻松！

Bootstrap style.css 中未设置 Jumbotron 背景图像

Bootstrap Jumbotron Background Image Not Setting in style.css

html

css

twitter-bootstrap

twitter-bootstrap-3