我不明白为什么在这种特殊情况下我不能用我自己的样式表覆盖 Bootstrap 样式

Question

我正在使用 bootstrap 构建一个简单的站点，并尝试修改警报框的样式。

在头部，我链接到 Bootstrap CSS、Bootstrap 可选主题，然后是我的自定义样式表（按此顺序）。这是我正在尝试自定义的警报框：

<div id="success" class="alert alert-success">Success</div>

在我的自定义样式表中，我有：

#success {
    color: white;
    background-color: black;
    border-color: red;
}

发生的情况是字体颜色和边框颜色分别变为白色和红色，但背景没有。

在花费大量时间搜索并尝试不同的方法后，我注意到如果我不使用可选的 Bootstrap 主题，那么背景颜色会变为我指定的颜色。但是我不完全明白为什么。我一直在查看此警报框的可选主题 CSS：

alert-success {
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image:      -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
  background-repeat: repeat-x;
  border-color: #b2dba1;
}

我看到这里多次提到了坚持不变成黑色的颜色（绿色#dff0d8）。我认为在使用可选的 CSS 主题时我无法更改警报成功框的背景颜色的原因是因为使用此主题时背景不再是“背景颜色：黑色”中的“纯色” ;"但变成了 webkit 渐变（不管是什么）。我是否正确理解这一点？有没有一种简单的方法可以在我的自定义 CSS 表中为这个特定的警报框覆盖这个或打开这个渐变。

我是新手，我还没有完全理解 CSS 表中的 webkit 规则。提前致谢。

---

更新

感谢下面每个人的帮助，我能够理解问题并纠正它。这里是：

我使用的可选引导主题通过“背景图像”创建背景，而不是像我试图做的那样“背景颜色”。因此，即使我正确更改了背景颜色，也会在其之上创建背景图像。有很多方法可以在这里做我想做的事： - 添加“背景图片：无；”在自定义 CSS - 更改“背景颜色：黑色；”到“背景：黑色；”在自定义 CSS 规则中

谢谢大家。

Answer 1

尝试删除 background-image 属性以及设置背景颜色。

#success {
    color: white;
    background-color: black;
    background-image: none;
    border-color: red;
}

Answer 2

您可以尝试使用 !important 的混乱解决方案

#success {
color: white;
background-color: black !important;
border-color: red;
}

您也可以尝试更具体地选择：

div#success.alert-success {
color: white;
background-color: black !important;
border-color: red;
}

Answer 3

尝试在您的自定义 CSS 规则中将 background-color: black; 更改为 background: black;。

#success {
  color: white;
  background: black;
  border-color: red;
}
.alert-success {
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
  background-repeat: repeat-x;
  border-color: #b2dba1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="success" class="alert alert-success">Success</div>