Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/80.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 用背景色替换导航条_Html_Css_Twitter Bootstrap - Fatal编程技术网

Html 用背景色替换导航条

Html 用背景色替换导航条,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在使用twitter引导开发一个响应性强的网站…… 缩小浏览器窗口时,导航栏将折叠…… 但在收拢的导航栏中,我需要显示背景色…… 但它显示的是背景图像。如何将其替换为背景色:#14486b 我不确定这张背景图片是从哪里来的 <div class="nav-collapse in collapse" style="height: auto;"> <ul class="nav"> <li class="active

我正在使用twitter引导开发一个响应性强的网站……
缩小浏览器窗口时,导航栏将折叠……
但在收拢的导航栏中,我需要显示背景色……
但它显示的是背景图像。如何将其替换为
背景色:#14486b
我不确定这张背景图片是从哪里来的

<div class="nav-collapse in collapse" style="height: auto;">
            <ul class="nav">
              <li class="active"><a href="/docs/examples/product.html">Product</a></li>
              <li><a href="/docs/examples/solution.html">Solutions</a></li>
              <li><a href="/docs/examples/service.html">Services</a></li>
              <li class="iphonePartnerLink"><a href="/docs/examples/partner.html">Partners</a></li>
              <li class="iphoneContactLink"><a href="/docs/examples/contact.html">Contact</a></li>
            </ul>

            <ul class="nav" id="navSecond">
              <li class=""><a href="/docs/examples/partners.html">Partners</a></li>
              <li><a href="/docs/examples/contact.html">Contact</a></li>
            </ul>
            <form class="navbar-form pull-right">
              <input class="span2" type="text" placeholder="Email">
              <input class="span2" type="password" placeholder="Password">
              <button type="submit" class="btn">Sign in</button>
            </form>
          </div>

登录
尝试分析图像的来源。 Firefox的Firebug是实现这一点的好工具 或者使用Chrome的开发工具(在Chrome中按F12打开)。在这两种工具中,您可以检查DOM树的单个组件,并查看所有附加的CSS样式(及其源代码)

如果原因是背景图像,则可以通过以下方式覆盖样式:

#idOfComponent {
    background-image:none
}

您必须使用媒体查询将图像替换为背景色:

 @media (min-width: 768px) and (max-width: 979px) {

         .navbar-inner{
                 background-image: url("http://www.defie.co/designerImages/bg_bar.png");/*remove this */
                 background-color:#14486b;
               }

           }

 /* Landscape phone to portrait tablet */
  @media (max-width: 767px) {

           .navbar-inner{
                 background-image: url("http://www.defie.co/designerImages/bg_bar.png");
                 background-color:#14486b;
               }
        }

 /* Landscape phones and down */
  @media (max-width: 480px) {

             .navbar-inner{
                 background-image: url("http://www.defie.co/designerImages/bg_bar.png");
                 background-color:#14486b;
               }
        }
如果要将导航栏固定在顶部:

.navbar {
 left: 0;
 position: absolute;/*remove this line if you want to fix it */
 right: 0;
 top: 0;
  }
评论后编辑:您已在媒体查询中将背景图像设置为“无”,颜色如下所示:

@media (max-width:980px){
         .navbar-inverse .navbar-inner{
          background-image: none;
          /*background-color: red;*/
        }
       }
@media (max-width: 767px) {
     .navbar-inverse .navbar-inner {
  background-image: none;
    /*background-color: red;*/
     }
    }

    @media (max-width: 480px) {
      .navbar-inverse .navbar-inner{
          background-image: none;
          /*background-color: red;*/
        }
      }

请用我上面提到的样式替换样式。

请提供链接…导航栏反转。导航栏内部{/*背景图像:url(');*/背景颜色:红色;}你是否有一个导航条内部的div围绕着当前的div。你能发布整个导航条代码吗?是的,它可以工作,但是应该有背景图像的主条消失了…如何解决它…据我所知,你想在图像的地方放一个背景色。你到底想要什么?当你减少浏览器时,我想要导航栏和背景图像Rajkumar,上面的查询将帮助你在iphone平板电脑上获得你的导航和背景图像,我在小提琴中更新了它不工作