设置导航栏的背景图像 - 引导程序

Question

我在设置文件夹“img/flower.jpg”中的背景图像时遇到问题。 我尝试在 CSS 中使用以下代码，但图像未显示：但是，如果我从 Internet 中的源引用它，它就可以工作。

#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

Answer 1

如果您可以显示图像和样式文件的文件夹结构，或者如果可能的话提供 url，这会更好。您的 img 文件夹应该与您的样式文件所在的目录位于同一目录中。那么这将起作用。

#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*/
    }

Answer 2

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

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