我不明白為什么在這種情況下我無法用自己的樣式表覆蓋Bootstrap樣式

Question

我正在使用引導程序構建一個簡單的站點，並且試圖修改警報框的樣式。

在頭，我鏈接到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主題時無法更改警報成功框的背景顏色的原因是，當使用此主題時，背景不再像“ background-color：black”中那樣是“純色” ;“ 但會變成Webkit漸變（無論是哪種漸變）。 我理解正確嗎？ 在我的自定義CSS工作表中，有沒有一種簡單的方法可以對此特定警報框覆蓋此梯度或改變此梯度。

我是新手，我還沒有完全了解CSS表單中的Webkit規則。 提前致謝。

---

更新資料

在下面每個人的幫助下，我得以理解並糾正了該問題。 這里是：

我正在使用的可選引導主題通過“ background-image”而非“ background-color”創建背景，就像我試圖做的那樣。 因此，即使我正確地更改了背景顏色，也會在其頂部創建背景圖像。 有一些方法可以在這里執行我想要的操作：-添加“ background-image：none;” 在自定義CSS中-更改“ background-color：black;” 改為“背景：黑色；” 在自定義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

嘗試更改background-color: black; background: black; 在您的自定義CSS規則中。

 #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>