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

Question

尽管样式可以内联，但我无法从外部样式表文件设置超大背景图像。

样式表链接可以在head标签之间以及引导链接之后找到。 我已经在这方面进行了几天尝试，但都没有成功，这能完成吗？

这是我到目前为止的内容：

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

从您上次评论的外观来看，这只是您的网址当前所在位置错误的情况。根据我的收集，这是您的基本结构

-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 。

解决起来非常简单，使用点告诉浏览器“向上”浏览css文件夹，然后进入图像文件夹。

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

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