Bootstrap CSS背景颜色不起作用

Posted 2023-03-21

【中文标题】Bootstrap CSS背景颜色不起作用

【英文标题】：Bootstrap CSS Background-color not working

【发布时间】：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，它将文本颜色设置为红色（这是有效的），但背景颜色应该是白色。开发人员工具再次显示活动页面背景颜色为白色，但显示为黑色。 哪里来的这么黑？请问什么是最好的摆脱它的方法？

【参考方案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。