如何在引导程序导航中使用背景图像?

时间:2015-05-02 10:35:22

标签: html css twitter-bootstrap

我想在导航中使用背景图片。我试图通过style.css文件添加图像。但我试图使用颜色。此代码仅采用颜色而不采用任何图像。任何人都可以解释它是如何发生的。怎么解决这个?

MemoryStream memStream = ...
using (StreamWriter wr = new StreamWriter(memStream)) {
    ... // Do the writing
}
memStream.Position = 0; // Rewind
// At this point `memStream` has all data pushed into it,
// and is positioned at zero, so it's ready to be copied.

在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>

2 个答案:

答案 0 :(得分:1)

背景的速记属性只是&#34;背景&#34;。

使用以下css:

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

这里是您更新的代码:

&#13;
&#13;
.header_bg {background:url("http://i.stack.imgur.com/Bnxz6.jpg") repeat-x scroll 0 0;}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

尝试使用background属性作为

,而不是背景图像
.header_bg {background:url("images/header_bg.png") repeat-x scroll 0 0;}