设置 bootstrap 导航栏的背景图片

Question

我遇到了一个问题，想要从文件夹 'img/flower.jpg' 中设置背景图片。我尝试在CSS中使用以下代码，但图片并未显示出来：然而，如果我从互联网上引用它，则可以正常工作。

#navigation,.navbar .navbar-default{
  background-image: url("img/flower.jpg");
  background: url('img/flower.jpg');
}



<div class="container">
<!-- Navigation -->
  <nav class="navbar navbar-default " id="navigation" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            Jeen's Portfolio 

        </div> 
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav> 
</div>

/* CSS used here will be applied after bootstrap.css */
#navigation,.navbar .navbar-default{
  border-top: 2px dotted blue;
  border-bottom: 2px dotted blue; 
  background-image: url("http://upload.wikimedia.org/wikipedia/commons/6/6b/Bubble_3.jpg");

  background: url('http://upload.wikimedia.org/wikipedia/commons/6/6b/Bubble_3.jpg');
 font-style: zapfino;
}

Demo

- user21

Answer 1

如果您可以展示图片文件夹和样式文件的文件夹结构，或者如果可能的话，给出URL链接，那么这将更好。您的图片文件夹应该与样式文件存在于同一目录中，然后这将起作用。

#navigation,.navbar .navbar-default{
  background-image: url("img/flower.jpg");
}

或者如果它在其他目录中，可以使用../来找到路径。这表示您从该目录向后退了一步。 像这样

像这样

#navigation,.navbar .navbar-default{
      background-image: url("../img/flower.jpg"); /* assuming img folder is one step back from css*/
    }

- Manoj Dhiman

---

文件路径名是正确的，但对于任何一个都不起作用。 - user21

在Firebug的CSS面板中检查是否在鼠标悬停时显示图像。 - Manoj Dhiman

我检查了Firebug并发现路径不正确。谢谢，我已经修复了。你知道Safari有没有类似于Firebug的插件可以用来检查吗？ - user21

抱歉，我不知道。我只喜欢使用Firefox和Chrome浏览器。 - Manoj Dhiman

文件名是jpeg，但我写成了jpg，所以刚才它无法工作。 - user21

Answer 2

背景图片：url('/img/flower.jpg');

背景图片：url('http://upload.wikimedia.org/wikipedia/commons/6/6b/Bubble_3.jpg');

- wijaya