0

最初のグラデーションに基づいて、ボタンの背景グラデーションの2番目の16進数の色を計算できるようにしたいと思います（以下のサンプルを参照）。

したがって、ユーザーからカラーピッカーを介して最初の色を取得し、Javascriptを使用して取得します（たとえば、以下のサンプルの#ededed）。最初の色に基づいて、JSを使用して、2番目の色とグラデーション効果（以下のサンプルの#dfdfdf）を生成するオフセットを計算したいと思います。カラーシフトは常に同じで、入力と出力の16進色だけが異なります。

使用できる数式や関数はありますか？ありがとう！

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
4

2 に答える 2

1

Just so you know, you're using the "old" format for -webkit-gradient. You should update to using this instead:

-webkit-linear-gradient(top, #ededed 5%, #dfdfdf)

Now, on to the actual problem, you haven't specified how the second colour should be calculated. I'll assue you want it a shade lighter, considering the example you gave. In this case, you can do this:

var color = "#ededed";
var components = [
    (255-(255-parseInt(color.substr(1,2),16))/2).toString(16),
    (255-(255-parseInt(color.substr(3,2),16))/2).toString(16),
    (255-(255-parseInt(color.substr(5,2),16))/2).toString(16)
];
if(components[0].length < 2) components[0] = "0"+components[0];
if(components[1].length < 2) components[1] = "0"+components[1];
if(components[2].length < 2) components[2] = "0"+components[2];
var out = "#"+components[0]+components[1]+components[2];

This will give you the colour that is halfway between the source colour and pure white (effectively overlaying a 50%-opacity white over it). To get a darker shade, just remove the 255-(255- bit and the corresponding ).

EDIT: On second thoughts, just use a solid background with a transparent gradient:

background:#ededed -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
于 2013-01-18T19:40:14.567 に答える
0

私はこれをテストしていませんが、私のアプローチは、16 進数ではなく RGB 値を使用することです。次に、変数を使用して 2 つの色の値を保持します。2 番目の変数は、最初の変数の値 (@color2 = @color1 + 2 など) などに基づいて計算できます。

于 2013-01-18T19:36:19.157 に答える