3

「ボタン」というクラスがあり、すべてのホバー要素に使用します。私のボタンのほとんどは黒 (背景色) で、.button:hover は項目の背景色の値を灰色に変更します。

ただし、一部のボタンの色はランダムであるため、背景色が明るい灰色に変わると効果が失われます。このため、全体の色を変更するのではなく、ホバーしたアイテムの「彩度」の値を変更したいと考えています。そうすれば、ホバー効果は基本色に基づきます..

私は考えていました...背景色の「彩度」値（のみ）を変更して、ホバー効果がランダムな色に引き続き役立つようにすることができれば。

4

2 に答える 2

7

フィルターの使用は現在、webkit ベースのブラウザーでのみ機能するようです。

-webkit-filter: saturate(3);
filter: saturate(3);

デモ| ソース

彩度フィルターと明るさを組み合わせると、黒が目に見えて影響を受け、最も効果があるようです

-webkit-filter: brightness(0.2) saturate(3);
filter: brightness(0.2) saturate(3);

デモ| ソース

追加のデモ: http://html5-demos.appspot.com/static/css/filters/index.html

于 2013-01-26T15:53:21.713 に答える
1

この問題には 2 つの解決策があります。

まず、白から透明へのグラデーションを持つ透明な png を使用します。onHover で、ボタンの上に画像を適用します。私はそれを試していませんが、有望に見えます。

次に、css インセット ドロップシャドウを使用します。パラメータを正しく設定すると、グラデーション効果を簡単に管理できます。

基になるボタンの色を変更するために rgba(r,g,b,a) を使用することもできます。ただし、ボタンのテキスト値も影響を受け、使いやすさの問題が生じることに注意してください。

于 2013-01-25T03:53:54.073 に答える