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规则。提前谢谢。

更新

感谢下面所有人的帮助，我能够理解并解决问题。这是：

我正在使用的可选引导程序主题通过“background-image”创建背景而不是像我试图做的那样“background-color”。因此，即使我正确地更改背景颜色，也会在其上创建背景图像。有办法在这里做我想做的事： - 添加“background-image：none;”在自定义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>

我无法理解为什么在这种特殊情况下我无法使用自己的样式表覆盖Bootstrap样式

3 个答案: