html - 如何在 Bootstrap 导航中使用背景图片？

Question

我想在导航中使用背景图片。我试图通过 style.css 文件添加图像。但我尝试过使用颜色。此代码仅采用颜色而不是任何图像。有人能解释一下它是如何发生的以及如何解决这个问题吗？

<div class="container-fluid header_bg">
    <nav class="navbar" role="navigation">
     <div class="container">
      <div class="navbar-header">
       <button  type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" area-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#"><img src="images/logo.png" alt=""/></a>
      </div>
      <div id="navbar" class="collapse navbar-collapse" >
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Porfolio</a></li>
         <li><a href="#">About</a></li> 
         <li><a href="#">Contact Us</a></li> 
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#">
        <span class="glyphicon glyphicon-user"></span> Sign Up</a>
         </li>
         <li><a href="#">
        <span class="glyphicon glyphicon-log-in"></span> Login</a>
         </li>
       </ul>

      </div>
     </div>
    </nav>
   </div>

在 style.css 文件中:

.header_bg {background-image:url("images/header_bg.png") repeat-x scroll 0 0;}

Answer 1

背景的简写属性就是“背景”。

使用以下 CSS:

.header_bg {background:url("images/header_bg.png") repeat-x scroll 0 0;}

这是您更新后的代码:

.header_bg {background:url("http://i.stack.imgur.com/Bnxz6.jpg") repeat-x scroll 0 0;}

<div class="container-fluid header_bg">
    <nav class="navbar" role="navigation">
     <div class="container">
      <div class="navbar-header">
       <button  type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" area-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#"><img src="images/logo.png" alt=""/></a>
      </div>
      <div id="navbar" class="collapse navbar-collapse" >
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Porfolio</a></li>
         <li><a href="#">About</a></li> 
         <li><a href="#">Contact Us</a></li> 
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#">
        <span class="glyphicon glyphicon-user"></span> Sign Up</a>
         </li>
         <li><a href="#">
        <span class="glyphicon glyphicon-log-in"></span> Login</a>
         </li>
       </ul>

      </div>
     </div>
    </nav>
   </div>