Bootstrap CSS背景颜色不起作用答案

【问题标题】：Bootstrap CSS Background-color not workingBootstrap CSS背景颜色不起作用
【发布时间】：2016-06-11 04:01:39
【问题描述】：

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

.navbar-inverse { 背景颜色：#9E1B34； } .navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-brand { 白颜色; } .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 { 颜色：#9E1B34；背景颜色：白色； }

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

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

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

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

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

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

【讨论】：

当我第一次编码网页时，颜色很好。他们一定是最近在 bootstrap 中添加了渐变。

【解决方案2】：

最简单的解决方案：

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

您的background-color 被background-image 属性覆盖，该属性创建了黑色渐变。

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

【讨论】：