css - 我不明白为什么在这种特殊情况下我无法使用自己的样式表覆盖 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 规则。提前致谢。

---

更新

感谢下面大家的帮助，我能够理解问题并纠正它。这是:

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

谢谢大家。

Answer 1

尝试删除背景图像属性并设置背景颜色。

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