0

次の CSS でスタイル設定されたボタンがあるとします。

background-image: linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%);
background-image: -o-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%);
background-image: -moz-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%);
background-image: -ms-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%);
background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.41, rgb(112,166,30)),
 color-stop(0.71, rgb(150,222,42))
);

同じ色を維持しながら明るく見せる簡単な方法は何ですか? 基本的には入力要素をホバリングしたときのスタイルを変更することです。

4

3 に答える 3

0

CSS3 を使用すると、より興味深いカラー モデル ( L がライトであるHSL ) を使用できるようになりました。色の明るさを変化させたい場合に適したモデルです。より明るくしたい場合（その上に白いレイヤーを使用するほど薄くない）、これが方法です.

CSS を変更したくない場合は、コーディングする必要があります。たとえば、css カラーを読み取って解析し ( jquery css functionを使用)、オブジェクトをホバリングするときにライト コンポーネントの別の値に動的に設定できます。

ただし、多くの色とグラデーションがある場合の最善の解決策は、CSS ルールに含める明るさの 2 つ (またはそれ以上) の値を単純に定義できる、lessのような動的スタイルシートを使用することです。

于 2012-06-21T17:30:09.647 に答える
0

グラデーション要素の背後に白い背景要素 (現在のコードを div などでラップ) をクラウドに配置し、ホバー時に色の不透明度を変更します。そうしないと、まったく別の色が必要になります。

それが役立つことを願っています。:)

于 2012-06-21T17:31:24.890 に答える
0

2 つのクラスを使用します。

.button {
... your existing css
}

次に、:hover に別の色のセットを使用します

.button:hover {
... your existing css with different colours
}

実際には、CSS を使用してさまざまな色の値を設定します。

ここに便利なツールがあります: http://www.colorzilla.com/gradient-editor/

于 2012-06-21T17:31:35.387 に答える