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

Question

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

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

这是我目前所拥有的:

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.

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

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

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