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.your 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

background-image：url（＆＃39; /img/flower.jpg'）;

background-image：url（＆＃39; http://upload.wikimedia.org/wikipedia/commons/6/6b/Bubble_3.jpg＆＃39;）;

设置导航栏的背景图像 - bootstrap

2 个答案: