首页 文章

Bootstrap CSS背景颜色不起作用

提问于
浏览 次
0

我正在使用Bootstrap的V3.3.6，我希望我的Ņavbar的背景颜色是深红色 . 除了标准的Bootstrap CSS，我有自己的CSS，如下所示：

.navbar-inverse {
      background-color: #9E1B34;
    }

    .navbar-inverse .navbar-nav > li > a,
    .navbar-inverse .navbar-brand {
      color: white;
    }
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus,
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus,
    .navbar-inverse .navbar-brand:hover,
    .navbar-inverse .navbar-brand:focus  {
      color: #9E1B34;
      background-color: white;
    }

该网站是http://www.alkd.org.au

当鼠标悬停在每个导航栏项目上时，我会得到正确的红色文本和白色背景样式 . 但是标准导航栏的背景颜色是黑色，而不是暗红色，即使我已经覆盖.navbar-inverse背景颜色 . 浏览器开发人员工具显示我的css是“获胜”的，但似乎被忽略了 . 我在开发人员工具中找不到任何显示黑色来自哪里的东西 . 我有一个javascript，它将活动类添加到活动页面，将活动页面设置为红色（正常工作），但背景颜色应为白色 . 再一次，开发人员工具显示活动页面背景颜色为白色，但显示为黑色 . 那黑色从哪里来？什么是摆脱它的最佳方法？

css twitter-bootstrap-3

2 回答

  • -1

    黑色实际上来自 .navbar-inverse 类的渐变 . 添加 backgound-image none将覆盖此项 .

    .navbar-inverse {
    background-color: #9E1B34;
    background-image: none;
}

    这也允许您删除 !important ，这使代码更易于维护 .

    回复于
  • 5

    最简单的解决方案：

    .navbar-inverse {
    background: #9E1B34;
}

    background-color 由 background-image 属性覆盖，创建了黑色渐变 .

    现在，组合属性 background 允许您设置新的背景颜色，同时将 background-image 设置为 none .

    回复于

相关问题