Question

虽然样式内联工作，但我无法从外部样式表文件中设置jumbotron背景图像。

样式表链接可以在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

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

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

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

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

由于您的css位于名为＆＃39; css＆＃39;的文件夹中。在root下，当浏览器查看您的网址时，它会相对于其当前位置解析它，因此最终会请求http://yourgreatsite.com/css/img/rocket.png。这就是为什么当你直接把它放在你的html中时它起作用的原因，因为它是相对于当前位置（即根）解析url，所以它最终请求http://yourgreatsite.com/img/rocket.png。

解决起来非常简单，使用点来告诉浏览器导航＆＃39; up＆＃39;从你的css文件夹中，然后进入你的图像文件夹。

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

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

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

1 个答案: