1

Rails 3.2.3 プロジェクトに Twitter Bootstrap を使用しており、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-color後者の方法をとる場合は、グラデーションの下部の色をrgb(255, 138, 22)と同じにすることを忘れないでください。それ以外の場合は、ボタンの上にカーソルを合わせると、グラデーションが終了し、背景色が開始する場所が明確になります。

于 2012-08-26T04:40:48.767 に答える