bootstrap navbar background-color不起作用但背景有效吗？

Question

在第一个示例中，我使用background-color将navbar的背景颜色更改为orangered，但它无效。在下一个示例中，我仅使用了background更改颜色，现在它正常工作，这种行为的原因是什么？

第一个例子

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css");

.navbar{
  background-color: orangered;  
  color: white;
  line-height: 50px;
}

<div class="navbar navbar-inverse">
  "background-color: orangered;" is not working.
</div>

下一个例子

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css");

.navbar{
  background: orangered;  
  color: white;
  line-height: 50px;
}

<div class="navbar navbar-inverse">
  "background: orangered;" is working.
</div>

Answer 1

当您使用background-color时，css中的原始类 .navbar-inverse background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%)接管并位于顶部。

在navbar css中添加background-image: none;取消它

<强> CSS

.navbar {
  background-color: orangered;
  color: white;
  line-height: 50px;
  background-image: none;
}

当您使用background时，它会取消background-image css，因此您会看到颜色