css - Bootstrap CSS 背景颜色不起作用

Question

我使用的是 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，该页面将文本颜色设置为红色(有效)，但背景颜色应为白色。开发人员工具再次显示事件页面背景颜色为白色，但显示为黑色。 哪里来的黑？请问摆脱它的最佳方法是什么？

Answer 1

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

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

这还允许您删除 !important 使代码更易于维护。