5

アクティブ状態のボタンに透明な黒のオーバーレイを追加したいので、クリックすると同じグラデーションになりますが、たとえばrgba(0,0,0,.3)

これが機能すると私が考えた方法は次のとおりです（この例ではwebkitを使用しています）：

background:rgba(0,0,0,.3), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);

またはカンマなしで、順序が逆になっています...しかし、何も表示されません!

それを行うためのオーバーレイとして機能する別の div を追加することに熱心ではないので、これを行う厳密な CSS の方法はありますか? :beforeまたは疑似クラスかもしれないと思っ:afterていましたが、これらの使用方法についての手がかりがありません!

答えをいただければ幸いです。これは長い間私を悩ませてきました。

4

3 に答える 3

3

それはできません。rgbaイメージではなく、色を定義します。できることは、グラデーションではないグラデーションを使用することです。

background: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);

これが、開発時に省略形を使用する代わりに常に指定する理由background-imageです。これにより、デバッグが容易になります。

于 2012-06-02T01:28:24.243 に答える
2

::after擬似要素でそれを行うことができます。

最初に、ボタン CSS を で定義してから、次のように withposition: relativeを使用する必要があります。::afterposition: absolute

.button {
  position: relative;
}

.button:active::after {
    content: ' ';
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

ライブ フィドル デモ

于 2012-06-02T01:41:28.033 に答える
1

逆に考える

background-color: black16 進数から rgba に変換された色 (最初は1アルファ用に設定) でグラデーションを設定してオーバーレイし、次にグラデーションをアルファ(30% の黒が表示されます) に:activeフェードします。0.7

フィドルを参照してください。

button {
    background-color: black;
    background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
    background-image: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
}

button:active {
    background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);
    background-image: -moz-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);    
}
于 2012-06-02T01:27:46.703 に答える