停止Twitter Bootstrap覆蓋按鈕的自定義css

Question

我正在使用Twitter Bootstrap進行Rails 3.2.3項目，並且正在導入我的application.css.scss文件中的每個樣式表。我正在使用位於應用程序文件中的引導文件上方的static.css.scss文件來定製靜態文件夾中的頁面（使用不同文件夾中的渲染文件）。我試圖讓這個按鈕與普通的btn類不同。我的代碼是：

.btn.signup { 
    margin-top: 10px; 
    font-size: 18px; 
    padding: 10px 48px 10px; 
    background-color: rgb(255, 138, 22); 
} 

.btn.signup:hover { 
    margin-top: 10px; 
    font-size: 18px; 
    padding: 10px 48px 10px; 
    background-color: rgb(255, 138, 22); 
} 

但是，在Firefox中，除了外邊緣是正確的顏色外，按鈕仍然是灰色的。當我懸停在按鈕上時，下半部分是橙色的。檢查按鈕，它顯示：

.btn.signup:hover, li.signup.buttons:hover { 
    margin-top: 10px; 
    font-size: 18px; 
    padding: 10px 48px; 
    background-color: rgb(255, 138, 22); 
} 

button.btn, input.btn[type="submit"] { 
} 

.btn:hover, li.buttons:hover { 
    color: rgb(51, 51, 51); 
    text-decoration: none; 
    background-color: rgb(230, 230, 230); 
    background-position: 0px -15px; 
    -moz-transition: background-position 0.1s linear 0s; 
} 

.btn:hover, li.buttons:hover, .btn:active, li.buttons:active, .btn.active, li.active.buttons, .btn.disabled, li.disabled.buttons, .btn[disabled], li.buttons[disabled] { 
    background-color: rgb(230, 230, 230); 
} 

.btn.signup, li.signup.buttons { 
    margin-top: 10px; 
    font-size: 18px; 
    padding: 10px 48px; 
    background-color: rgb(255, 138, 22); 
} 

我該如何使整個按鈕是橙色的？稍後我會更改懸停顏色，但現在我希望它全部是橙色而不是灰色。

Answer 1

不知道你是否仍在尋找這方面的幫助。哦，好吧......我想我仍然會思考我的想法。

請注意，Twitter Bootstrap中的類.btn實際上已附加了一個背景圖像，以生成稍微微妙的漸變效果。

漸變覆蓋了大部分按鈕的背景，所以您選擇的背景顏色只顯示在邊緣。

此漸變也是爲什麼當您將鼠標懸停在按鈕上時您會部分看到自己的背景色 - -moz-transition會導致背景圖像漸變向上移動（通常用於模擬按鈕顏色中逐漸變暗的效果當你懸停在它上面）。如果仔細觀察，可以看到按鈕的上半部分由漸變的底部着色，而下半部分爲背景色。

因此，您需要在自定義類中定義background-image: none;，或者更好地定義自己的漸變，以免失去視覺美感。如果您採取後一種行動，請記住將梯度的底部顏色與您的background-color rgb（255，138，22）相同。否則，當您將鼠標懸停在按鈕上時，將很清楚漸變結束的位置，並且背景顏色開始。