1

我将 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);
}

我怎样才能使它整个按钮是橙色的？稍后我将更改悬停颜色，但现在我希望它全部为橙色而不是灰色。

4

1 回答 1

3

不确定您是否仍在为此寻求帮助。哦，好吧......我想我仍然会提出我的想法。

请注意，.btnTwitter Bootstrap 中的类实际上附加了一个背景图像，以生成有点微妙的渐变效果。

渐变覆盖了按钮的大部分背景，因此您选择的背景颜色仅显示在边缘。

这种渐变也是当您将鼠标悬停在按钮上时您会部分看到自己的背景颜色的-moz-transition原因 - 背景图像渐变向上移动的原因（这通常用于模拟当您将鼠标悬停在按钮上时按钮颜色逐渐变暗的效果）。如果仔细观察，您会发现按钮的上半部分由渐变的底部着色，而下半部分则是背景色。

所以你需要background-image: none;在你的自定义类中定义，或者更好的是，定义你自己的渐变，这样你就不会失去那种视觉美感。如果您采取后一种做法，请记住使渐变的底部颜色与您的background-colorrgb(255, 138, 22) 相同。否则，当您将鼠标悬停在按钮上时，渐变结束的位置和背景颜色的开始位置将非常清晰。

于 2012-08-26T04:40:48.767 回答