CSS 设置导航栏的背景图像 - bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29619346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting background image of a navigation bar - bootstrap
提问by user21
I have problem setting the background image from folder, 'img/flower.jpg'. I tried using the following code in CSS, the image does not show up: However it works if I reference it from a source in internet.
我在从文件夹“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;
}
回答by Manoj Kumar
This can better if you can show your folder structure for the images and the style file or if possible give the url.your img folder should be in same directory in which your style file exists .then this will work .
如果您可以显示图像和样式文件的文件夹结构，或者如果可能，请提供 url。您的 img 文件夹应该在您的样式文件所在的同一目录中，这会更好。然后这将起作用。
#navigation,.navbar .navbar-default{
background-image: url("img/flower.jpg");
}
or if it is in some other directory find the path with the use of ../. this denote that you are one step back from the directory .
like this
或者如果它在其他目录中，请使用../. 这表示您从目录后退了一步。像这样
#navigation,.navbar .navbar-default{
background-image: url("../img/flower.jpg"); /* assuming img folder is one step back from css*/
}
回答by wijaya
background-image: url('/img/flower.jpg');
背景图片：url('/img/flower.jpg');
background-image: url('http://upload.wikimedia.org/wikipedia/commons/6/6b/Bubble_3.jpg');
背景图片：url(' http://upload.wikimedia.org/wikipedia/commons/6/6b/Bubble_3.jpg');
