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）相同。否则，当您将鼠标悬停在按钮上时，渐变结束的位置以及背景颜色的开始将非常清晰。

阻止Twitter Bootstrap覆盖按钮的自定义css

1 个答案: